/* ============================================================
   mesutozdemir.com.tr — site.css
   Kaynak: design_handoff_mesutozdemir_site (2026-07-08)
   ============================================================ */

:root{
  --bg:#FCFBF7;
  --navy:#0B1B2B;
  --ink:#151515;
  --body:#3d3a35;
  --read:#1f1d1a;
  --champagne:#CBB895;
  --grey:#8E8A82;
  --ph-green:#152B22;
  --ph-gold:#C9A96A;
  --ph-text:#F3EDE2;
  --cream:#F6F0E7;
  --hair:rgba(11,27,43,.12);
  --hair-block:rgba(11,27,43,.14);
  --hair-section:rgba(11,27,43,.2);
  --link-hover:#8E7B4F;
  --ss3:'Source Sans 3',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,sans-serif;color:var(--ink)}
img{max-width:100%}
a{color:var(--navy);text-decoration:none;transition:color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}

.page{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.wrap{width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;flex:1}

/* ---------- animasyonlar ---------- */
@keyframes moFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes moReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes moGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.mo-fade{animation:moFadeUp .8s ease both}
@supports (animation-timeline: view()){
  .mo-fade{animation-timeline:view();animation-range:entry 0% entry 30%}
}

/* okuma çizgisi (yazı detay) */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--champagne);transform-origin:0 50%;transform:scaleX(0);z-index:100}
@supports (animation-timeline: scroll()){
  .progress{animation:moGrow linear both;animation-timeline:scroll();transform:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .progress{display:none}
}

/* ---------- ortak: etiketler ---------- */
.label{font-family:var(--ss3);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600}
.label--champagne{color:var(--champagne);letter-spacing:.16em;font-weight:700}

/* ---------- masthead ---------- */
.masthead{padding:26px 56px 0;text-align:center}
.masthead--compact{padding-top:22px}
.topline{display:flex;justify-content:space-between;gap:16px;font-family:var(--ss3);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--hair-section);padding-bottom:10px}
.topline-mid{color:var(--champagne);font-weight:600;font-size:14.5px}
.topline-alan{text-transform:none}
.imza-link{display:inline-block}
.imza{height:92px;width:auto;margin:16px auto 28px;display:block;animation:moReveal 1.5s cubic-bezier(.5,0,.15,1) .2s both}
.masthead--compact .imza{height:60px;margin:22px auto 18px;animation-duration:1.3s;animation-delay:.15s}

/* nav: .wrap'in doğrudan çocuğu — sayfa boyunca sticky kalır */
.nav{display:flex;justify-content:center;gap:28px;font-size:13.5px;padding:14px 16px;margin:0 56px;border-top:2px solid var(--navy);border-bottom:1px solid var(--hair-section);white-space:nowrap;position:sticky;top:0;z-index:60;background:rgba(252,251,247,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav a[aria-current]{font-weight:600;border-bottom:2px solid var(--champagne);padding-bottom:2px}

/* ---------- manşet (ana sayfa) ---------- */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:72px;padding:64px 56px;align-items:center}
.hero-quote{display:flex;flex-direction:column;gap:24px}
.hero-mark{font-family:Lora,serif;font-size:110px;line-height:0;color:var(--champagne);height:30px}
.hero-quote h1{margin:0}
.hero-quote h1 a{font-family:Lora,serif;font-weight:400;font-style:italic;font-size:40px;line-height:1.34;color:var(--ink);text-wrap:pretty;display:block}
.hero-quote h1 a:hover{color:var(--navy)}
.hero-cta{display:flex;align-items:center;gap:14px}
.dash{width:32px;height:1px;background:rgba(11,27,43,.3);flex:none}
.hero-cta a{font-family:var(--ss3);font-size:14px;letter-spacing:.04em;display:inline-flex;align-items:baseline;gap:6px;padding-bottom:2px}
.accent{color:var(--champagne)}

/* portre çerçevesi */
.portrait{position:relative}
.portrait-frame{position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(203,184,149,.55);border-radius:8px;pointer-events:none}
.portrait-photo{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.portrait-imza{position:absolute;pointer-events:none}
.portrait--hero{width:380px;height:460px;justify-self:end;margin-right:14px}
.portrait--hero .portrait-imza{right:-18px;bottom:-24px;height:64px;width:auto}
.portrait--bio{width:400px;height:500px;justify-self:end}
.portrait--bio .portrait-imza{right:-16px;bottom:-26px;height:72px;width:auto}

/* ---------- 3 sütun ---------- */
.cols{display:grid;grid-template-columns:.72fr 1.35fr .78fr;border-top:1px solid var(--hair-section);margin:0 56px}
.col-side{padding:36px 32px 36px 0;border-right:1px solid var(--hair-block);display:flex;flex-direction:column;gap:16px}
.col-mid{padding:36px 32px;border-right:1px solid var(--hair-block);display:flex;flex-direction:column;gap:16px}
.col-right{padding:36px 0 36px 32px;display:flex;flex-direction:column;gap:14px}

.mini{display:flex;flex-direction:column;gap:3px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.mini:hover{transform:translateX(5px)}
.mini:last-of-type{border-bottom:none;padding-bottom:0}
.mini-baslik{font-family:Lora,serif;font-size:16.5px;line-height:1.35;color:var(--ink)}
.mini-meta{font-family:var(--ss3);font-size:11.5px;letter-spacing:.06em;color:var(--grey)}
.more{font-size:13px;color:var(--navy);align-self:flex-start;margin-top:4px}

.featured-gorsel{width:100%;height:280px;object-fit:cover;border-radius:6px;display:block}
.featured-baslik{font-family:Lora,serif;font-size:30px;line-height:1.22;color:var(--ink);text-wrap:pretty}
.featured-ozet{margin:0;font-size:14.5px;line-height:1.8;color:var(--body)}
.dropcap{font-family:Lora,serif;font-size:44px;line-height:.9;float:left;padding:6px 10px 0 0;color:var(--navy)}
.okuma-suresi{color:var(--grey);font-size:12px;margin-left:6px}

.tanitim{margin:0;font-family:Lora,serif;font-size:18px;line-height:1.55;color:var(--ink)}
.kisa-bio{margin:0;font-size:13.5px;line-height:1.7;color:var(--body)}

/* bülten */
.bulten{border-top:1px solid var(--hair-block);padding-top:16px;display:flex;flex-direction:column;gap:10px;margin-top:auto}
.bulten-not{margin:0;font-size:12.5px;line-height:1.6;color:var(--grey)}
.bulten input[type=email]{font-family:Inter,sans-serif;font-size:13px;padding:11px 14px;border:1px solid rgba(11,27,43,.3);border-radius:4px;background:#FDFAF5;color:var(--ink);width:100%}
.bulten button{font-family:Inter,sans-serif;font-size:13px;font-weight:600;padding:11px 0;background:var(--navy);color:var(--cream);border:none;border-radius:4px;cursor:pointer}
.bulten-mesaj{margin:0;font-size:12.5px;color:var(--link-hover)}
.bulten-mesaj--hata{color:#8a3b2e}
.bulten-riza{margin:0;font-size:11px;line-height:1.5;color:var(--grey)}

/* ---------- arşiv (ana sayfa) ---------- */
.arsiv{margin:0 56px;border-top:1px solid var(--hair-section);padding:40px 0 56px}
.arsiv-bas{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.arsiv-bas h2{font-family:var(--ss3);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;margin:0}
.arsiv-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.arsiv-satir{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair)}
.arsiv-satir:hover{transform:translateX(5px)}
.arsiv-baslik{font-family:Lora,serif;font-size:17px;color:var(--ink)}
.arsiv-tarih{font-family:var(--ss3);font-size:12px;color:var(--grey);white-space:nowrap}

/* ---------- iki adres ---------- */
.adresler{margin:0 56px;border-top:1px solid var(--hair-section);padding:48px 0 56px}
.adresler h2{font-family:var(--ss3);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;margin:0 0 24px}
.adres-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.kart{border-radius:8px;padding:40px;display:flex;flex-direction:column;gap:14px}
.kart:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,27,43,.18)}
.kart--ph{background:var(--ph-green)}
.kart--collection{background:var(--navy)}
.kart-etiket{font-family:var(--ss3);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.kart--ph .kart-etiket{color:var(--ph-gold)}
.kart--collection .kart-etiket{color:var(--champagne)}
.kart-baslik{font-family:Lora,serif;font-size:26px;color:var(--ph-text);line-height:1.3}
.kart-imza{height:44px;width:auto;align-self:flex-start}
.kart p{margin:0;font-size:13.5px;line-height:1.7}
.kart--ph p{color:rgba(243,237,226,.65)}
.kart--collection p{color:rgba(246,240,231,.65)}
.kart-link{font-size:14px;align-self:flex-start;margin-top:auto}
.kart--ph .kart-link{color:var(--ph-gold)}
.kart--collection .kart-link{color:var(--champagne)}

/* ---------- footer ---------- */
.footer{padding:36px 56px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:auto}
.footer--cizgili{border-top:1px solid var(--hair-block)}
.footer-imza{height:30px;width:auto;opacity:.85;display:block}
.footer-linkler{display:flex;gap:24px;font-size:13px}
.footer-telif{font-size:12px;color:var(--grey)}

/* ---------- yazılar (arşiv sayfası) ---------- */
.liste-bas{padding:64px 56px 8px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.liste-bas h1{font-family:Lora,serif;font-weight:500;font-size:46px;margin:0;color:var(--ink)}
.liste-bas-sol{display:flex;flex-direction:column;gap:10px}
.cipler{display:flex;gap:10px;align-items:center;white-space:nowrap;font-family:var(--ss3);font-size:12.5px;letter-spacing:.06em;padding-bottom:6px;flex-wrap:wrap}
.cip{padding:7px 15px;border:1px solid rgba(11,27,43,.25);border-radius:3px}
.cip:hover{background:rgba(11,27,43,.06)}
.cip.aktif{background:var(--navy);color:var(--cream);border-color:var(--navy)}

.liste{padding:32px 56px 64px}
.liste-ic{border-top:1px solid var(--hair-section);padding-top:8px}
.liste-kafa{display:grid;grid-template-columns:130px 1fr 110px 56px;column-gap:28px;padding:8px 0 12px;border-bottom:1px solid var(--hair);font-family:var(--ss3);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:600}
.liste-kafa .kafa-yil{text-align:right}
.satir{display:grid;grid-template-columns:130px 1fr 110px 56px;column-gap:28px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair)}
.satir:hover{transform:translateX(6px)}
.satir:last-child{border-bottom:none}
.satir-baslik{font-family:Lora,serif;font-size:21px;color:var(--ink)}
.satir-alan{font-family:var(--ss3);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne);font-weight:600}
.satir-tarih{font-family:var(--ss3);font-size:13px;color:var(--grey)}
.satir-yil{font-family:Lora,serif;font-size:18px;color:var(--champagne);text-align:right}
.satir.gizli{display:none}

/* ---------- yazı detay ---------- */
.makale-bas{max-width:44rem;margin:0 auto;padding:64px 24px 0;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.makale-meta{display:flex;gap:14px;align-items:center;font-family:var(--ss3);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;flex-wrap:wrap;justify-content:center}
.makale-meta a{color:var(--champagne);font-weight:700}
.makale-meta span{color:var(--grey)}
.makale-bas h1{font-family:Lora,serif;font-weight:500;font-size:44px;line-height:1.18;margin:0;color:var(--ink);text-wrap:pretty}
.yazar-satiri{display:flex;align-items:center;gap:14px}
.yazar-satiri span:not(.dash){font-family:var(--ss3);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

.kapak{max-width:56rem;width:100%;margin:44px auto 0;padding:0 24px;display:flex;flex-direction:column;gap:10px}
.kapak img{width:100%;height:440px;object-fit:cover;border-radius:6px;display:block}
.kapak figcaption{font-family:var(--ss3);font-size:12px;color:var(--grey);text-align:center}
.kapak figure{margin:0;display:flex;flex-direction:column;gap:10px}

.makale{max-width:44rem;margin:0 auto;padding:48px 24px 0;font-family:Lora,serif;font-size:18.5px;line-height:1.85;color:var(--read)}
.makale p{margin:0 0 28px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.makale p a,.makale li a,.makale h2 a,.makale h3 a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(203,184,149,.9);text-decoration-thickness:1px;text-underline-offset:3px}
.makale p a:hover,.makale li a:hover,.makale h2 a:hover,.makale h3 a:hover{color:var(--link-hover);text-decoration-color:currentColor}
.makale li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ara-alinti p{text-align:center;hyphens:none;-webkit-hyphens:none}
.makale .makale-kaynak{text-align:left;hyphens:none;-webkit-hyphens:none}
.bio-paragraflar p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.makale .dropcap{font-size:58px;line-height:.85;padding:8px 12px 0 0}
.makale h2{font-family:Lora,serif;font-weight:500;font-size:25px;line-height:1.3;margin:40px 0 16px;color:var(--ink);text-wrap:pretty}
.makale h3{font-family:Lora,serif;font-weight:500;font-size:20.5px;line-height:1.35;margin:32px 0 12px;color:var(--ink)}
.makale ul,.makale ol{margin:0 0 28px;padding-left:28px;display:flex;flex-direction:column;gap:10px}
.makale li::marker{color:var(--champagne)}
.ara-alinti{margin:44px 0;padding:8px 0;border-top:1px solid var(--hair-section);border-bottom:1px solid var(--hair-section);text-align:center}
.ara-alinti p{font-style:italic;font-size:24px;line-height:1.5;margin:20px 0;color:var(--navy);text-wrap:pretty}
.ara-alinti--bas{margin-top:0}
.ara-alinti-kaynak{font-family:var(--ss3);font-size:13px;letter-spacing:.08em;color:var(--grey)}
.ara-alinti .ara-alinti-kaynak{font-style:normal;font-size:13px;margin:0 0 16px}
.makale-kaynak{margin:0;font-family:var(--ss3);font-size:13.5px;color:var(--grey)}
.makale-kaynak a{color:var(--navy)}

.yazar-blok{max-width:44rem;margin:56px auto 0;padding:0 24px;width:100%}
.yazar-blok-ic{border-top:1px solid var(--hair-section);padding:32px 0;display:flex;gap:28px;align-items:center}
.yazar-blok-imza{height:56px;width:auto;flex:none}
.yazar-blok-metin{display:flex;flex-direction:column;gap:6px}
.yazar-blok-etiket{font-family:var(--ss3);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600}
.yazar-blok-bio{margin:0;font-size:13.5px;line-height:1.65;color:var(--body)}
.yazar-blok-bio a{color:var(--navy)}

.ilgili{max-width:1168px;width:100%;margin:24px auto 0;padding:0 56px;border-top:1px solid var(--hair-section)}
.ilgili h2{font-family:var(--ss3);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;margin:36px 0 8px}
.ilgili-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:16px 0 56px}
.ilgili-kart{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--navy);padding-top:14px}
.ilgili-kart:hover{transform:translateY(-3px)}
.ilgili-etiket{font-family:var(--ss3);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne);font-weight:600}
.ilgili-baslik{font-family:Lora,serif;font-size:19px;line-height:1.35;color:var(--ink)}

/* ---------- hakkımda ---------- */
.bio{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;padding:72px 56px 64px;align-items:start}
.bio-metin{display:flex;flex-direction:column;gap:24px;max-width:44rem}
.bio-etiket{font-family:var(--ss3);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.bio-metin h1{font-family:Lora,serif;font-weight:500;font-size:42px;line-height:1.18;margin:0;color:var(--ink);text-wrap:pretty}
.bio-paragraflar{font-family:Lora,serif;font-size:17.5px;line-height:1.8;color:var(--read);display:flex;flex-direction:column;gap:20px}
.bio-paragraflar p{margin:0}
.egitim{border-top:1px solid var(--hair-block);padding-top:20px;display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:12px;font-size:14px}
.egitim dt{font-family:var(--ss3);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-top:2px}
.egitim dd{margin:0}

.iletisim{margin:0 56px;border-top:1px solid var(--hair-section);padding:48px 0 72px;display:grid;grid-template-columns:1fr 1fr;gap:64px}
.iletisim-sol{display:flex;flex-direction:column;gap:16px}
.iletisim-sol h2{font-family:Lora,serif;font-weight:500;font-size:30px;margin:0;color:var(--ink)}
.iletisim-sol p{margin:0;font-size:14.5px;line-height:1.7;color:var(--body);max-width:30em}
.iletisim-linkler{display:flex;flex-direction:column;gap:10px;font-size:15px}
.iletisim-linkler a{align-self:flex-start}
.iletisim-sag{display:flex;flex-direction:column;gap:12px;justify-content:center}
.iletisim-sag .bulten-form{display:flex;gap:12px}
.iletisim-sag input[type=email]{font-family:Inter,sans-serif;font-size:14px;padding:13px 18px;flex:1;border:1px solid rgba(11,27,43,.3);border-radius:4px;background:#FDFAF5;color:var(--ink)}
.iletisim-sag button{font-family:Inter,sans-serif;font-size:14px;font-weight:600;padding:13px 26px;background:var(--navy);color:var(--cream);border:none;border-radius:4px;cursor:pointer}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .masthead{padding-left:32px;padding-right:32px}
  .nav{margin:0 32px}
  .hero{gap:48px;padding:48px 32px}
  .cols{margin:0 32px}
  .arsiv,.adresler,.iletisim{margin:0 32px}
  .liste-bas,.liste{padding-left:32px;padding-right:32px}
  .bio{padding:56px 32px 48px;gap:48px}
  .footer{padding:32px}
  .ilgili{padding:0 32px}
  .portrait--bio{width:100%;max-width:400px;height:auto;aspect-ratio:4/5}
}

@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:56px;padding-top:40px}
  .portrait--hero{grid-row:1;justify-self:center;margin-right:0;width:min(380px,84vw);height:auto;aspect-ratio:38/46}
  .cols{grid-template-columns:1fr}
  .col-side,.col-mid{border-right:none;padding:32px 0;border-bottom:1px solid var(--hair-block)}
  .col-mid{order:-1}
  .col-right{padding:32px 0}
  .arsiv-grid{grid-template-columns:1fr;column-gap:0}
  .adres-grid{grid-template-columns:1fr}
  .bio{grid-template-columns:1fr;gap:56px}
  .portrait--bio{justify-self:center}
  .iletisim{grid-template-columns:1fr;gap:40px}
  .liste-bas{flex-direction:column;align-items:flex-start;gap:20px}
  .ilgili-grid{grid-template-columns:1fr;gap:24px}
}

@media (max-width:640px){
  .masthead{padding-left:20px;padding-right:20px}
  .imza{height:72px}
  .masthead--compact .imza{height:56px}
  .topline{font-size:10.5px;gap:10px}
  .topline span{white-space:nowrap}
  .topline span:last-child{display:none}
  .nav{margin:0;padding:12px 20px;justify-content:flex-start;gap:22px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .hero{padding:36px 20px;gap:44px}
  .hero-quote h1 a{font-size:28px}
  .cols,.arsiv,.adresler,.iletisim{margin:0 20px}
  .liste-bas{padding:40px 20px 4px}
  .liste-bas h1{font-size:34px}
  .liste{padding:20px 20px 48px}
  .liste-kafa{display:none}
  .satir{grid-template-columns:1fr auto;row-gap:6px;column-gap:16px;grid-template-areas:"baslik baslik" "alan yil"}
  .satir-baslik{grid-area:baslik;font-size:18px}
  .satir-yil{grid-area:yil;text-align:left;font-size:15px}
  .satir-alan{grid-area:alan;align-self:center}
  .satir-tarih{display:none}
  .makale-bas{padding:40px 20px 0}
  .makale-bas h1{font-size:31px}
  .kapak{margin-top:32px;padding:0 20px}
  .kapak img{height:auto;aspect-ratio:3/2}
  .makale{padding:36px 20px 0;font-size:17px}
  .ara-alinti p{font-size:20px}
  .yazar-blok{padding:0 20px}
  .yazar-blok-ic{flex-direction:column;align-items:flex-start;gap:16px}
  .ilgili{padding:0 20px}
  .bio{padding:40px 20px 40px}
  .bio-metin h1{font-size:31px}
  .featured-baslik{font-size:24px}
  .kart{padding:28px}
  .footer{padding:28px 20px;flex-direction:column;gap:14px;text-align:center}
  .footer-linkler{flex-wrap:wrap;justify-content:center}
  .portrait--hero{width:min(340px,82vw)}
  .portrait--bio{max-width:340px}
}