/*
Theme Name: Karanlık Oda
Theme URI: https://ozgenseremet.com.tr
Author: Özgen Şeremet
Author URI: https://ozgenseremet.com.tr
Description: ozgenseremet.com.tr için sıfırdan tasarlanmış, fotoğrafçılık/teknoloji/tüketici odaklı kişisel blog teması. Yazı sayısına göre kendini yeniden kuran asimetrik bir dergi grid'i kullanır.
Version: 2.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: karanlikoda
*/

:root{
  --accent-hue: 205;
  --bg: oklch(14% 0.014 255);
  --bg-elev: oklch(18.5% 0.016 255);
  --border: oklch(27% 0.02 255);
  --text: oklch(97% 0.006 255);
  --text-2: oklch(67% 0.014 255);
  --accent: oklch(80% 0.13 var(--accent-hue));
  --accent-2: oklch(87% 0.11 var(--accent-hue));
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-2);}
.screen-reader-text{position:absolute;left:-9999px;}

/* header */
.site-header{border-bottom:1px solid var(--border);}
.header-inner{max-width:1240px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;color:inherit;}
.brand:hover{color:inherit;}
.brand svg{width:34px;height:34px;color:var(--accent);flex-shrink:0;}
.brand img.custom-logo{width:32px;height:32px;border-radius:6px;object-fit:cover;}
.brand-text{display:flex;flex-direction:column;}
.brand-name{font-family:'Outfit',sans-serif;font-weight:600;font-size:21px;color:var(--text);line-height:1;letter-spacing:-.01em;}
.brand-tagline{font-size:11px;color:var(--text-2);margin-top:4px;}

.main-nav{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap;}
.main-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap;}
.main-nav a{font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;color:var(--text-2);letter-spacing:.01em;}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--text);}

.nav-toggle{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text-2);align-items:center;justify-content:center;cursor:pointer;}
.nav-toggle svg{width:18px;height:18px;}

.search-form{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:6px 6px 6px 14px;flex-shrink:0;}
.search-form input[type="search"]{background:transparent;border:0;outline:0;color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;width:140px;}
.search-form input[type="search"]::placeholder{color:var(--text-2);}
.search-form button{width:30px;height:30px;border-radius:50%;border:0;background:var(--bg-elev);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.search-form svg{width:15px;height:15px;}

.container{max-width:1240px;margin:0 auto;padding:0 24px 88px;}

/* shared card bits */
.card{display:block;color:inherit;}
.card:hover{color:inherit;}
.card:hover h1,.card:hover h2,.card:hover h3,.card:hover h4{color:var(--accent);}
.thumb{border-radius:10px;position:relative;overflow:hidden;background:var(--bg-elev);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.tag-sm{font-size:9px;padding:3px 8px;}

.card h1,.card h2,.card h3,.card h4{font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:-.01em;color:var(--text);margin:0;transition:color .15s ease;}
.card p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
.readmore{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--accent);margin-top:12px;}
.readmore svg{width:13px;height:13px;}

.card-std .thumb{aspect-ratio:16/10;margin-bottom:14px;}
.card-std .tag{margin-bottom:10px;}
.card-std h3{font-size:18px;line-height:1.3;margin-bottom:8px;}
.card-std p{-webkit-line-clamp:2;}

.card-wide .thumb{aspect-ratio:16/9.5;margin-bottom:16px;}
.card-wide .tag{margin-bottom:10px;}
.card-wide h2{font-size:25px;line-height:1.22;margin-bottom:10px;}
.card-wide p{-webkit-line-clamp:3;font-size:14.5px;}

.card-hero .thumb{aspect-ratio:16/10.5;margin-bottom:18px;}
.card-hero .tag{margin-bottom:12px;}
.card-hero h1{font-size:34px;line-height:1.16;margin-bottom:12px;}
.card-hero p{-webkit-line-clamp:2;font-size:15px;}

.card-compact{display:flex;flex-direction:row;align-items:center;gap:14px;}
.card-compact .thumb{width:88px;height:88px;flex-shrink:0;}
.card-compact h4{font-size:16px;line-height:1.32;margin-top:6px;}
.hero-side .card-compact .thumb{width:126px;height:126px;}
.hero-side .card-compact h4{font-size:18px;}

/* layout grids */
.hero{display:grid;grid-template-columns:1fr 1.55fr;gap:26px;margin:34px 0 56px;}
.hero-side{display:flex;flex-direction:column;gap:22px;justify-content:space-between;}

.section-title{display:flex;align-items:center;gap:11px;font-family:'Outfit',sans-serif;font-size:22px;font-weight:600;color:var(--text);margin:0 0 30px;}
.section-title::before{content:'';width:4px;height:20px;background:var(--accent);border-radius:2px;}

.grid-equal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-bottom:28px;}
.grid-feature{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-bottom:28px;}
.feature-side{display:flex;flex-direction:column;gap:22px;}

/* pagination */
.pagination{margin-top:24px;}
.pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.js .pagination.is-hidden{display:none;}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:8px;border:1px solid var(--border);color:var(--text-2);font-size:13px;font-weight:600;}
.pagination a:hover{color:var(--text);border-color:var(--accent);}
.pagination .current{color:var(--bg);background:var(--accent);border-color:var(--accent);}

/* sonsuz kaydırma */
.load-more{display:flex;align-items:center;justify-content:center;min-height:64px;margin-top:8px;font-size:13px;color:var(--text-2);}
.ko-spinner{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;opacity:0;transition:opacity .2s;animation:ko-spin .8s linear infinite;}
.load-more.is-loading .ko-spinner{opacity:1;}
.ko-end{display:none;letter-spacing:.02em;}
.load-more.is-done .ko-spinner{display:none;}
.load-more.is-done .ko-end{display:inline;}
@keyframes ko-spin{to{transform:rotate(360deg);}}

/* single / page content */
.entry-header{max-width:820px;margin:44px auto 28px;padding:0 24px;text-align:left;}
.entry-header .tag{margin-bottom:16px;}
.entry-title{font-family:'Outfit',sans-serif;font-weight:600;font-size:40px;line-height:1.15;letter-spacing:-.015em;color:var(--text);margin:0 0 14px;}
.entry-meta{font-size:13px;color:var(--text-2);}
.entry-thumb{max-width:1000px;margin:0 auto 40px;padding:0 24px;}
.entry-thumb .thumb{aspect-ratio:16/9;}
.entry-content{max-width:740px;margin:0 auto;padding:0 24px 60px;font-size:17px;line-height:1.75;}
.entry-content p{margin:0 0 22px;}
.entry-content h2{font-family:'Outfit',sans-serif;font-weight:600;font-size:26px;margin:40px 0 16px;}
.entry-content h3{font-family:'Outfit',sans-serif;font-weight:600;font-size:21px;margin:32px 0 14px;}
.entry-content a{text-decoration:underline;text-underline-offset:2px;}
.entry-content blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--text-2);font-style:italic;}
.entry-content img{border-radius:10px;margin:8px 0;}
.entry-content ul,.entry-content ol{padding-left:22px;margin:0 0 22px;}
.page-content{max-width:740px;margin:44px auto 60px;padding:0 24px;font-size:17px;line-height:1.75;}
.page-title{font-family:'Outfit',sans-serif;font-weight:600;font-size:34px;margin:0 0 24px;}

/* comments */
.comments-area{max-width:740px;margin:0 auto 60px;padding:0 24px;}
.comments-title{font-family:'Outfit',sans-serif;font-weight:600;font-size:20px;margin:0 0 24px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-body{border-top:1px solid var(--border);padding:20px 0;}
.comment-author{font-weight:700;font-size:14px;}
.comment-meta{font-size:12px;color:var(--text-2);margin-bottom:8px;}
.comment-content p{font-size:14.5px;line-height:1.6;color:var(--text-2);margin:0;}
.comment-reply-link{font-size:12px;color:var(--accent);}
.comment-respond input[type="text"],.comment-respond input[type="email"],.comment-respond input[type="url"],.comment-respond textarea{width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-family:'Manrope',sans-serif;font-size:14px;margin-bottom:12px;}
.comment-respond .form-submit input{background:var(--accent);color:var(--bg);border:0;border-radius:999px;padding:10px 22px;font-weight:700;cursor:pointer;}

/* 404 */
.error-404{max-width:600px;margin:100px auto;padding:0 24px;text-align:center;}
.error-404 h1{font-family:'Outfit',sans-serif;font-size:36px;font-weight:600;}
.error-404 p{color:var(--text-2);margin-bottom:28px;}

.site-footer{border-top:1px solid var(--border);padding:26px 24px;text-align:center;color:var(--text-2);font-size:12px;}

/* responsive */
@media (max-width: 900px){
  .main-nav{display:none;width:100%;order:3;}
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column;gap:4px;padding:16px 0 4px;}
  .nav-toggle{display:flex;margin-left:auto;order:2;}
  .search-form{order:1;}
  .header-inner{gap:16px;}

  .hero{grid-template-columns:1fr;}
  .hero-side{flex-direction:column;}
  .grid-equal{grid-template-columns:1fr 1fr;}
  .grid-feature{grid-template-columns:1fr;}
}

@media (max-width: 600px){
  .grid-equal{grid-template-columns:1fr;}
  .card-hero h1{font-size:26px;}
  .entry-title{font-size:30px;}
  .search-form input[type="search"]{width:90px;}
}