/* ============ ORTAK TEMEL + ANA SAYFA ============ */

  :root{
    --forest:#2C4A38; --forest-deep:#20362A; --sage:#8AA399; --sage-dark:#5E7A6A;
    --cream:#F5F1E9; --cream-soft:#FCFAF5; --ink:#22312A; --ink-soft:#4A574F;
    --clay:#C77B54; --gold:#D8A64C; --lav:#9B8FA6; --line:#E7E0D2;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Mulish',sans-serif;color:var(--ink);background:var(--cream);line-height:1.72;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3{font-family:'Fraunces',serif;line-height:1.14;font-weight:600;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
  .narrow{max-width:720px;margin:0 auto;}

  .btn{position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--sage);color:#173425;font-weight:700;font-size:15px;padding:16px 34px;border-radius:999px;transition:background .22s,transform .22s,box-shadow .22s;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(94,122,106,.28);}
  .btn:hover{background:var(--sage-dark);transform:translateY(-2px);box-shadow:0 12px 28px rgba(94,122,106,.36);}
  .btn svg{transition:transform .22s;} .btn:hover svg{transform:translateX(4px);}

  /* nav */
  #nav{position:sticky;top:0;z-index:40;background:rgba(245,241,233,.8);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s;}
  #nav.scrolled{box-shadow:0 4px 20px rgba(34,49,42,.07);border-color:rgba(231,224,210,.8);}
  #nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;transition:padding .25s;}
  #nav.scrolled .wrap{padding:12px 28px;}
  .brand{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--forest);}
  .navlinks{display:flex;gap:28px;font-size:15px;font-weight:600;}
  .navlinks a{position:relative;color:var(--forest);opacity:.82;transition:opacity .2s;padding:2px 0;}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;}
  .navlinks a:hover{opacity:1;} .navlinks a:hover::after{transform:scaleX(1);}
  @media(max-width:860px){.navlinks{display:none;}}

  /* hero */
  .hero{position:relative;background:var(--forest);color:var(--cream);text-align:center;overflow:hidden;min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vh,56px) 0 clamp(72px,11vh,120px);}
  .hero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;}
  .b1{width:340px;height:340px;background:radial-gradient(circle,rgba(138,163,153,.55),transparent 70%);top:-90px;left:-60px;animation:floatY 9s ease-in-out infinite;}
  .b2{width:420px;height:420px;background:radial-gradient(circle,rgba(155,143,166,.4),transparent 70%);bottom:-160px;right:-80px;animation:floatY2 11s ease-in-out infinite;}
  /* Masaüstünde fotoğraf sağa geçtiği için bu ışık onun alt köşesiyle
     çakışıyor ve lekeli görünüyordu; dışarı itilip yumuşatıldı. */
  @media(min-width:900px){ .b2{bottom:-280px;right:-220px;opacity:.32;} }
  .b3{width:240px;height:240px;background:radial-gradient(circle,rgba(216,166,76,.28),transparent 70%);top:40px;right:14%;animation:floatY 13s ease-in-out infinite;}
  .hero .inner{position:relative;z-index:1;width:100%;}
  .hero-portrait{position:relative;width:clamp(140px,23vh,230px);margin:0 auto clamp(18px,3.2vh,40px);opacity:0;animation:fadeUp .8s ease .1s forwards;}
  .hero-portrait .ring{position:absolute;inset:-16px;border-radius:50%;border:1.5px dashed rgba(138,163,153,.65);animation:spinSlow 40s linear infinite;}
  @media(max-width:600px){.hero-portrait{width:clamp(130px,21vh,190px);}}
  .hero .eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#AFC6BC;font-weight:700;margin-bottom:clamp(14px,2.4vh,26px);opacity:0;animation:fadeUp .8s ease .28s forwards;}
  .hero h1{font-size:clamp(32px,min(6.2vw,7.4vh),62px);font-weight:600;margin-bottom:clamp(14px,2.4vh,24px);color:#fff;letter-spacing:-0.02em;opacity:0;animation:fadeUp .8s ease .42s forwards;}
  .hero p{font-size:clamp(16px,1.95vh,19px);max-width:600px;margin:0 auto clamp(20px,3.4vh,40px);color:rgba(255,255,255,.86);opacity:0;animation:fadeUp .8s ease .56s forwards;}
  .hero .btn{opacity:0;animation:fadeUp .8s ease .7s forwards;}
  .scrollcue{position:absolute;bottom:clamp(22px,4.5vh,74px);left:50%;transform:translateX(-50%);z-index:1;color:rgba(255,255,255,.5);animation:bob 2.2s ease-in-out infinite;}

  .wave{display:block;width:100%;height:auto;line-height:0;}

  section{padding:100px 0;position:relative;}
  .sec-cream{background:var(--cream);} .sec-soft{background:var(--cream-soft);}
  .sec-forest{background:var(--forest);color:var(--cream);overflow:hidden;}
  .kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:#4C6656;margin-bottom:16px;}
  .sec-forest .kicker{color:#AFC6BC;}
  h2{font-size:clamp(30px,4.2vw,42px);margin-bottom:22px;color:var(--forest);}
  .sec-forest h2{color:#fff;}
  .lead{font-size:18.5px;color:var(--ink-soft);max-width:660px;} .sec-forest .lead{color:rgba(255,255,255,.85);}
  section p+p{margin-top:16px;}

  /* about */
  .about-grid p{color:var(--ink-soft);}

  /* photo frames */
  .photo-frame{position:relative;overflow:hidden;background:linear-gradient(135deg,#9db4aa,#8AA399);}
  .photo-frame.round{border-radius:50%;aspect-ratio:1/1;}
  .photo-img{width:100%;height:100%;object-fit:cover;display:block;}
  .photo-ph{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:#fff;padding:24px;}
  .photo-ph span{font-size:14px;line-height:1.5;opacity:.95;} .photo-ph b{font-family:'Fraunces',serif;font-weight:600;}

  /* area cards */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
  @media(max-width:820px){.cards{grid-template-columns:1fr 1fr;}}
  @media(max-width:540px){.cards{grid-template-columns:1fr;}}
  .card{position:relative;border-radius:22px;padding:32px 26px 26px;min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;overflow:hidden;}
  .card::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.08);opacity:0;transition:opacity .3s;}
  .card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 20px 40px rgba(34,49,42,.2);} .card:hover::before{opacity:1;}
  .card .idx{position:absolute;top:22px;right:26px;font-family:'Fraunces',serif;font-size:15px;opacity:.5;}
  .card .t{position:relative;font-family:'Fraunces',serif;font-size:21px;font-weight:600;line-height:1.22;}
  /* Kart zeminleri. c2 ve c4 koyultuldu: beyaz metin özgün kiremit ve
     lila tonlarında 3.29:1 ve 3.06:1 kalıyordu (eşik 4.5:1). */
  .c1{background:var(--sage-dark);} .c2{background:#9B6042;} .c3{background:var(--gold);color:var(--forest-deep);}
  .c4{background:#706778;} .c5{background:var(--forest);} .c6{background:var(--sage);color:var(--forest-deep);}

  /* sessions */
  .session-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;}
  @media(max-width:700px){.session-cards{grid-template-columns:1fr;}}
  .scard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px 34px;transition:transform .3s,box-shadow .3s;}
  .scard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(34,49,42,.12);}
  .scard .ic{width:54px;height:54px;border-radius:15px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--sage-dark);margin-bottom:22px;}
  .scard h3{font-size:22px;color:var(--forest);margin-bottom:10px;}
  .scard p{color:var(--ink-soft);font-size:16px;}

  /* approach steps */
  .steps{position:relative;z-index:1;max-width:660px;margin:56px auto 0;}
  .step{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:34px 36px;text-align:left;transition:transform .3s,background .3s;}
  .step:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);}
  .step>*{position:relative;z-index:1;}
  .stepglow{position:absolute;inset:0;z-index:0;opacity:.12;animation:colorGlow 9s ease-in-out infinite;}
  .s1 .stepglow{background:radial-gradient(90% 120% at 12% 0%, var(--sage), transparent 60%);}
  .s2 .stepglow{background:radial-gradient(90% 120% at 88% 0%, var(--gold), transparent 60%);animation-delay:1.5s;}
  .s3 .stepglow{background:radial-gradient(100% 120% at 50% 115%, var(--lav), transparent 60%);animation-delay:3s;}
  .step .num{font-family:'Fraunces',serif;font-size:14px;font-weight:600;color:#AFC6BC;letter-spacing:2px;margin-bottom:10px;}
  .step h3{font-size:23px;color:#fff;margin-bottom:9px;}
  .step p{color:rgba(255,255,255,.82);font-size:16px;}
  .arrow{display:flex;justify-content:center;padding:18px 0;color:var(--sage);opacity:.7;animation:bob 2.6s ease-in-out infinite;}

  /* faq */
  .faq{margin-top:38px;}
  .faq details{border-bottom:1px solid var(--line);}
  .faq summary{list-style:none;cursor:pointer;padding:26px 0;font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--forest);display:flex;justify-content:space-between;align-items:center;gap:18px;transition:color .2s;}
  .faq summary:hover{color:var(--sage-dark);} .faq summary::-webkit-details-marker{display:none;}
  .faq summary .chev{transition:transform .3s;flex:0 0 auto;color:var(--sage-dark);}
  .faq details[open] summary .chev{transform:rotate(180deg);}
  .faq .ans{padding:0 0 28px;color:var(--ink-soft);font-size:16.5px;max-width:660px;animation:fadeUp .4s ease;}

  .contact-inner{text-align:center;}

  /* blog teaser */
  .blog-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
  @media(max-width:860px){.blog-teaser{grid-template-columns:1fr;}}
  .bt-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;}
  .bt-card:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(34,49,42,.13);}
  .bt-top{position:relative;height:96px;display:flex;align-items:flex-end;padding:16px;overflow:hidden;}
  .bt-top .cat{position:relative;z-index:1;background:rgba(255,255,255,.92);color:var(--forest);font-size:11.5px;font-weight:700;letter-spacing:.4px;padding:5px 12px;border-radius:999px;}
  .bt-top .lw{position:absolute;right:-6px;bottom:-14px;width:96px;opacity:.3;z-index:0;transform-origin:50% 92%;animation:sway 9s ease-in-out infinite;}
  .bt1{background:linear-gradient(135deg,#6f8b7c,#5E7A6A);} .bt2{background:linear-gradient(135deg,#d9a94e,#c68f38);} .bt3{background:linear-gradient(135deg,#a99cb4,#8f80a0);}
  .bt-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
  .bt-body h3{font-size:19px;color:var(--forest);margin-bottom:9px;line-height:1.3;}
  .bt-body p{color:var(--ink-soft);font-size:15px;flex:1;}
  .bt-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--sage-dark);font-weight:700;font-size:14px;transition:gap .2s;}
  .bt-card:hover .bt-more{gap:11px;}
  .blog-all{display:flex;justify-content:center;margin-top:40px;}
  @keyframes sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

  /* footer */
  footer{background:var(--forest-deep);color:rgba(255,255,255,.78);padding:74px 0 40px;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1.2fr 1fr;gap:52px;}
  @media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:38px;}}
  .footer-brand .brand-f{font-family:'Fraunces',serif;font-size:23px;line-height:1.2;color:#fff;margin-bottom:14px;}
  .footer-brand p{font-size:15px;color:rgba(255,255,255,.68);max-width:300px;line-height:1.6;}
  .footer-col h3{font-family:'Fraunces',serif;font-weight:600;color:#fff;font-size:18px;margin-bottom:20px;}
  .footer-col ul{list-style:none;}
  .footer-col li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px;font-size:15px;line-height:1.5;}
  .footer-col li svg{flex:0 0 auto;margin-top:2px;color:var(--sage);}
  .footer-col a{color:rgba(255,255,255,.82);transition:color .2s;} .footer-col a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:26px;font-size:13px;color:rgba(255,255,255,.62);}

  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
  @keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
  @keyframes spinSlow{to{transform:rotate(360deg)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
  @keyframes sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
  @keyframes sway2{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
  @keyframes colorGlow{0%,100%{opacity:.08}50%{opacity:.24}}

  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){*{animation:none !important;}.reveal{opacity:1;transform:none;transition:none;}}


/* ============ BLOG LİSTESİ ============ */

  :root{
    --forest:#2C4A38; --forest-deep:#20362A; --sage:#8AA399; --sage-dark:#5E7A6A;
    --cream:#F5F1E9; --cream-soft:#FCFAF5; --ink:#22312A; --ink-soft:#4A574F;
    --clay:#C77B54; --gold:#D8A64C; --lav:#9B8FA6; --line:#E7E0D2;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Mulish',sans-serif;color:var(--ink);background:var(--cream);line-height:1.72;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3{font-family:'Fraunces',serif;line-height:1.14;font-weight:600;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px;}

  /* nav */
  #nav{position:sticky;top:0;z-index:40;background:rgba(245,241,233,.8);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s;}
  #nav.scrolled{box-shadow:0 4px 20px rgba(34,49,42,.07);border-color:rgba(231,224,210,.8);}
  #nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;transition:padding .25s;}
  #nav.scrolled .wrap{padding:12px 28px;}
  .brand{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--forest);}
  .navlinks{display:flex;gap:28px;font-size:15px;font-weight:600;}
  .navlinks a{position:relative;color:var(--forest);opacity:.82;transition:opacity .2s;padding:2px 0;}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;}
  .navlinks a:hover{opacity:1;} .navlinks a:hover::after{transform:scaleX(1);}
  .navlinks a.active{opacity:1;} .navlinks a.active::after{transform:scaleX(1);}
  @media(max-width:860px){.navlinks{display:none;}}

  /* HEADING-1 BANNER (page header visual) */
  .page-hero{position:relative;background:var(--forest);color:var(--cream);text-align:center;padding:96px 0 118px;overflow:hidden;}
  .page-hero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;}
  .ph-b1{width:320px;height:320px;background:radial-gradient(circle,rgba(138,163,153,.5),transparent 70%);top:-80px;left:-40px;animation:floatY 10s ease-in-out infinite;}
  .ph-b2{width:360px;height:360px;background:radial-gradient(circle,rgba(155,143,166,.4),transparent 70%);bottom:-140px;right:-60px;animation:floatY2 12s ease-in-out infinite;}
  .page-hero .lf1{top:60px;left:11%;width:40px;animation:sway 6s ease-in-out infinite;}
  .page-hero .lf2{bottom:70px;right:12%;width:52px;animation:sway2 8s ease-in-out infinite;}
  .page-hero .inner{position:relative;z-index:1;}
  .page-hero .eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#AFC6BC;font-weight:700;margin-bottom:22px;}
  .page-hero h1{font-size:clamp(42px,6vw,64px);color:#fff;margin-bottom:20px;letter-spacing:-0.02em;}
  .page-hero p{font-size:19px;max-width:560px;margin:0 auto;color:rgba(255,255,255,.85);}

  /* pen-writing animation under H1 */
  .penwrite{display:block;width:min(340px,78%);height:46px;margin:6px auto 0;overflow:visible;}
  .uline{stroke-dasharray:440;stroke-dashoffset:440;animation:drawLoop 5.5s ease-in-out infinite;}
  @keyframes drawLoop{
    0%{stroke-dashoffset:440;opacity:0}
    5%{opacity:1}
    50%{stroke-dashoffset:0;opacity:1}
    84%{stroke-dashoffset:0;opacity:1}
    94%{stroke-dashoffset:0;opacity:0}
    100%{stroke-dashoffset:440;opacity:0}
  }
  /* faint drifting ink strokes in banner bg */
  .ink{position:absolute;pointer-events:none;opacity:.13;z-index:0;stroke:#F5F1E9;fill:none;}
  .ink-1{top:44px;left:6%;width:220px;animation:drift 16s ease-in-out infinite;}
  .ink-2{bottom:40px;right:8%;width:260px;animation:drift2 20s ease-in-out infinite;}
  @keyframes drift{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(16px,-10px) rotate(2deg)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(-18px,10px) rotate(-3deg)}}

  /* featured post */
  .featured{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;margin-bottom:40px;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;}
  .featured:hover{transform:translateY(-5px);box-shadow:0 26px 52px rgba(34,49,42,.16);}
  .feat-thumb{position:relative;min-height:330px;display:flex;align-items:flex-end;padding:26px;overflow:hidden;}
  .feat-thumb .cat{position:relative;z-index:1;background:rgba(255,255,255,.92);color:var(--forest);font-size:12px;font-weight:700;letter-spacing:.5px;padding:7px 15px;border-radius:999px;}
  .feat-thumb .lw{position:absolute;right:-18px;bottom:-22px;width:210px;opacity:.26;z-index:0;}
  .feat-body{padding:46px 48px;display:flex;flex-direction:column;justify-content:center;}
  .feat-body h2{font-size:clamp(25px,3vw,33px);color:var(--forest);margin:12px 0 14px;line-height:1.2;}
  .feat-body p{color:var(--ink-soft);font-size:17px;}
  .feat-cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;background:var(--sage);color:#fff;font-weight:700;font-size:14.5px;padding:13px 26px;border-radius:999px;align-self:flex-start;transition:background .2s,gap .2s;}
  .featured:hover .feat-cta{background:var(--sage-dark);gap:13px;}
  @media(max-width:760px){.featured{grid-template-columns:1fr;}.feat-thumb{min-height:200px;}.feat-body{padding:34px 30px;}}

  .wave{display:block;width:100%;height:auto;line-height:0;}

  /* post grid */
  .posts{padding:84px 0 100px;}
  .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;}
  @media(max-width:860px){.post-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.post-grid{grid-template-columns:1fr;}}
  .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;}
  .post-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(34,49,42,.14);}
  .post-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;display:flex;align-items:flex-end;padding:18px;}
  .post-thumb .cat{position:relative;z-index:1;background:rgba(255,255,255,.9);color:var(--forest);font-size:12px;font-weight:700;letter-spacing:.5px;padding:6px 13px;border-radius:999px;}
  .post-thumb .lw{position:absolute;right:-8px;bottom:-12px;width:110px;opacity:.32;z-index:0;}
  .t1{background:linear-gradient(135deg,#6f8b7c,#5E7A6A);} .t2{background:linear-gradient(135deg,#d9a94e,#c68f38);}
  .t3{background:linear-gradient(135deg,#a99cb4,#8f80a0);} .t4{background:linear-gradient(135deg,#c77b54,#b0663f);}
  .post-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;}
  .post-date{font-size:13px;color:var(--sage-dark);font-weight:600;letter-spacing:.4px;margin-bottom:10px;}
  .post-body h3{font-size:21px;color:var(--forest);margin-bottom:10px;line-height:1.28;}
  .post-body p{color:var(--ink-soft);font-size:15.5px;flex:1;}
  .readmore{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--sage-dark);font-weight:700;font-size:14.5px;transition:gap .2s;}
  .post-card:hover .readmore{gap:11px;}

  /* footer */
  footer{background:var(--forest-deep);color:rgba(255,255,255,.78);padding:74px 0 40px;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1.2fr 1fr;gap:52px;}
  @media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:38px;}}
  .footer-brand .brand-f{font-family:'Fraunces',serif;font-size:23px;line-height:1.2;color:#fff;margin-bottom:14px;}
  .footer-brand p{font-size:15px;color:rgba(255,255,255,.68);max-width:300px;line-height:1.6;}
  .footer-col h3{font-family:'Fraunces',serif;font-weight:600;color:#fff;font-size:18px;margin-bottom:20px;}
  .footer-col ul{list-style:none;}
  .footer-col li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px;font-size:15px;line-height:1.5;}
  .footer-col li svg{flex:0 0 auto;margin-top:2px;color:var(--sage);}
  .footer-col a{color:rgba(255,255,255,.82);transition:color .2s;} .footer-col a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:26px;font-size:13px;color:rgba(255,255,255,.62);}

  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
  @keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
  @keyframes sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
  @keyframes sway2{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){*{animation:none !important;}.reveal{opacity:1;transform:none;transition:none;}}


/* ============ YAZI SAYFASI ============ */

  :root{
    --forest:#2C4A38; --forest-deep:#20362A; --sage:#8AA399; --sage-dark:#5E7A6A;
    --cream:#F5F1E9; --cream-soft:#FCFAF5; --ink:#22312A; --ink-soft:#4A574F;
    --clay:#C77B54; --gold:#D8A64C; --lav:#9B8FA6; --line:#E7E0D2;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Mulish',sans-serif;color:var(--ink);background:var(--cream);line-height:1.72;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Fraunces',serif;line-height:1.15;font-weight:600;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px;}

  /* nav */
  #nav{position:sticky;top:0;z-index:40;background:rgba(245,241,233,.8);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s;}
  #nav.scrolled{box-shadow:0 4px 20px rgba(34,49,42,.07);border-color:rgba(231,224,210,.8);}
  #nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;transition:padding .25s;}
  #nav.scrolled .wrap{padding:12px 28px;}
  .brand{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--forest);}
  .navlinks{display:flex;gap:28px;font-size:15px;font-weight:600;}
  .navlinks a{position:relative;color:var(--forest);opacity:.82;transition:opacity .2s;padding:2px 0;}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;}
  .navlinks a:hover{opacity:1;} .navlinks a:hover::after{transform:scaleX(1);}
  .navlinks a.active{opacity:1;} .navlinks a.active::after{transform:scaleX(1);}
  @media(max-width:860px){.navlinks{display:none;}}

  /* HEADING-1 BANNER */
  .page-hero{position:relative;background:var(--forest);color:var(--cream);text-align:center;padding:84px 0 112px;overflow:hidden;}
  .page-hero .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;}
  .ph-b1{width:320px;height:320px;background:radial-gradient(circle,rgba(138,163,153,.5),transparent 70%);top:-80px;left:-40px;animation:floatY 10s ease-in-out infinite;}
  .ph-b2{width:360px;height:360px;background:radial-gradient(circle,rgba(155,143,166,.4),transparent 70%);bottom:-140px;right:-60px;animation:floatY2 12s ease-in-out infinite;}
  .page-hero .lf1{top:56px;left:10%;width:38px;animation:sway 6s ease-in-out infinite;}
  .page-hero .lf2{bottom:66px;right:11%;width:50px;animation:sway2 8s ease-in-out infinite;}
  .ink{position:absolute;pointer-events:none;opacity:.12;z-index:0;stroke:#F5F1E9;fill:none;}
  .ink-1{top:40px;left:6%;width:210px;animation:drift 16s ease-in-out infinite;}
  .ink-2{bottom:38px;right:7%;width:250px;animation:drift2 20s ease-in-out infinite;}
  .page-hero .inner{position:relative;z-index:1;max-width:780px;margin:0 auto;}
  .page-hero .eyebrow{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:#AFC6BC;font-weight:700;margin-bottom:20px;}
  .page-hero h1{font-size:clamp(32px,4.8vw,50px);color:#fff;margin-bottom:16px;letter-spacing:-0.02em;line-height:1.16;}
  .post-meta{font-size:14.5px;color:rgba(255,255,255,.78);}
  .penwrite{display:block;width:200px;height:34px;margin:14px auto 0;overflow:visible;}
  .uline{stroke-dasharray:300;stroke-dashoffset:300;animation:drawLoop 5.5s ease-in-out infinite;}
  @keyframes drawLoop{0%{stroke-dashoffset:300;opacity:0}5%{opacity:1}50%{stroke-dashoffset:0;opacity:1}84%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:300;opacity:0}}

  .wave{display:block;width:100%;height:auto;line-height:0;}

  /* article */
  .article-wrap{padding:66px 0 92px;}
  .breadcrumb{max-width:720px;margin:0 auto 26px;font-size:14px;color:var(--sage-dark);font-weight:600;}
  .breadcrumb a:hover{color:var(--forest);}
  .article{max-width:720px;margin:0 auto;}
  .article .lead{font-size:20px;color:var(--ink);line-height:1.72;margin-bottom:30px;}
  .article p{font-size:18px;line-height:1.8;color:var(--ink);margin-bottom:22px;}
  .article h2{font-size:27px;color:var(--forest);margin:46px 0 16px;display:flex;align-items:center;gap:13px;}
  .article h2::before{content:"";flex:0 0 auto;width:24px;height:3px;border-radius:2px;background:var(--sage);}
  .pullquote{border-left:3px solid var(--sage);padding:6px 0 6px 28px;margin:38px 0;font-family:'Fraunces',serif;font-weight:500;font-size:23px;line-height:1.45;color:var(--forest-deep);}
  .article ul{margin:0 0 24px;padding:0;list-style:none;}
  .article ul li{position:relative;padding-left:28px;margin-bottom:13px;font-size:18px;line-height:1.7;color:var(--ink);}
  .article ul li::before{content:"";position:absolute;left:5px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--sage);}
  .author{display:flex;gap:18px;align-items:flex-start;max-width:720px;margin:60px auto 0;padding:30px;background:var(--cream-soft);border:1px solid var(--line);border-radius:20px;}
  .author .av{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#9db4aa,#8AA399);flex:0 0 auto;overflow:hidden;}
  .author .av img{width:100%;height:100%;object-fit:cover;display:block;}
  .author h3{color:var(--forest);font-size:18px;margin-bottom:6px;}
  .author p{font-size:15px;color:var(--ink-soft);margin:0 0 8px;line-height:1.6;}
  .author a{color:var(--sage-dark);font-weight:700;}
  .backblog{display:inline-flex;align-items:center;gap:8px;max-width:720px;margin:40px auto 0;color:var(--sage-dark);font-weight:700;transition:gap .2s;}
  .backblog:hover{gap:12px;}

  /* ÖZET box */
  .summary{max-width:720px;margin:0 auto 30px;background:linear-gradient(135deg,rgba(138,163,153,.16),rgba(216,166,76,.10));border:1px solid var(--line);border-radius:20px;padding:28px 30px;}
  .summary h3{display:flex;align-items:center;gap:11px;font-size:17px;color:var(--forest);margin-bottom:14px;letter-spacing:.2px;}
  .summary h3 svg{color:var(--sage-dark);flex:0 0 auto;}
  .summary p{font-size:16.5px;line-height:1.72;color:var(--ink-soft);margin:0;}

  /* İÇİNDEKİLER table */
  .toc{position:static;max-width:720px;margin:0 auto 44px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  .toc-head{display:flex;align-items:center;gap:11px;padding:20px 26px;border-bottom:1px solid var(--line);background:var(--cream-soft);}
  .toc-head h3{font-size:16px;color:var(--forest);letter-spacing:.3px;}
  .toc-head svg{color:var(--sage-dark);flex:0 0 auto;}
  .toc ol{list-style:none;counter-reset:toc;margin:0;padding:10px 0;}
  .toc li{counter-increment:toc;}
  .toc li a{display:flex;align-items:baseline;gap:14px;padding:13px 26px;font-size:16.5px;color:var(--ink-soft);border-left:3px solid transparent;transition:background .2s,color .2s,border-color .2s;}
  .toc li a::before{content:counter(toc,decimal-leading-zero);font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:var(--sage);flex:0 0 auto;}
  .toc li a:hover{background:var(--cream);color:var(--forest);}
  .toc li a.active{border-color:var(--sage);background:var(--cream);color:var(--forest);font-weight:600;}

  /* anchor offset for sticky nav */
  .article h2{scroll-margin-top:96px;}

  /* footer */
  footer{background:var(--forest-deep);color:rgba(255,255,255,.78);padding:74px 0 40px;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1.2fr 1fr;gap:52px;}
  @media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:38px;}}
  .footer-brand .brand-f{font-family:'Fraunces',serif;font-size:23px;line-height:1.2;color:#fff;margin-bottom:14px;}
  .footer-brand p{font-size:15px;color:rgba(255,255,255,.68);max-width:300px;line-height:1.6;}
  .footer-col h3{font-family:'Fraunces',serif;font-weight:600;color:#fff;font-size:18px;margin-bottom:20px;}
  .footer-col ul{list-style:none;}
  .footer-col li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px;font-size:15px;line-height:1.5;}
  .footer-col li svg{flex:0 0 auto;margin-top:2px;color:var(--sage);}
  .footer-col a{color:rgba(255,255,255,.82);transition:color .2s;} .footer-col a:hover{color:#fff;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:26px;font-size:13px;color:rgba(255,255,255,.62);}

  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
  @keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
  @keyframes sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
  @keyframes sway2{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
  @keyframes drift{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(16px,-10px) rotate(2deg)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(-18px,10px) rotate(-3deg)}}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){*{animation:none !important;}.reveal{opacity:1;transform:none;transition:none;}}

  /* related posts + faq + disclaimer */
  .related{max-width:720px;margin:58px auto 0;}
  .related h3{font-size:20px;color:var(--forest);margin-bottom:18px;}
  .rel-list{display:grid;gap:12px;}
  .rel-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;transition:transform .25s,box-shadow .25s;}
  .rel-item:hover{transform:translateX(5px);box-shadow:0 12px 26px rgba(34,49,42,.10);}
  .rel-item span{font-family:'Fraunces',serif;font-weight:600;color:var(--forest);font-size:17px;line-height:1.35;}
  .rel-item svg{flex:0 0 auto;color:var(--sage-dark);margin-left:auto;}
  .postfaq{max-width:720px;margin:56px auto 0;}
  .postfaq h2{margin-top:0;}
  .postfaq details{border-bottom:1px solid var(--line);}
  .postfaq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:'Fraunces',serif;font-weight:600;font-size:18.5px;color:var(--forest);display:flex;justify-content:space-between;gap:16px;align-items:center;}
  .postfaq summary::-webkit-details-marker{display:none;}
  .postfaq summary svg{flex:0 0 auto;color:var(--sage-dark);transition:transform .3s;}
  .postfaq details[open] summary svg{transform:rotate(180deg);}
  .postfaq .a{padding:0 0 22px;color:var(--ink-soft);font-size:16.5px;}
  .cta-box{max-width:720px;margin:52px auto 0;background:var(--forest);border-radius:22px;padding:38px 40px;text-align:center;}
  .cta-box h3{color:#fff;font-size:24px;margin-bottom:12px;}
  .cta-box p{color:rgba(255,255,255,.84);font-size:16.5px;margin-bottom:24px;}
  .cta-box a{display:inline-flex;align-items:center;gap:9px;background:var(--sage);color:#fff;font-weight:700;font-size:15px;padding:15px 32px;border-radius:999px;transition:background .2s,gap .2s;}
  .cta-box a:hover{background:var(--sage-dark);gap:13px;}

/* güvenlik: içindekiler asla yapışmasın */
.toc{position:static !important;top:auto !important;backdrop-filter:none !important;}

/* ---- LOGO ---- */
.brand{display:flex;align-items:center;gap:11px;}
.brand-logo{height:38px;width:auto;display:block;flex:0 0 auto;}
.footer-logo{height:54px;width:auto;display:block;margin-bottom:14px;}
@media(max-width:600px){
  .brand{gap:9px;font-size:18px;}
  .brand-logo{height:32px;}
}
@media(max-width:380px){
  .brand{font-size:16px;gap:8px;}
  .brand-logo{height:28px;}
}


/* ---- YAPRAK MOTİFLERİ ---- */
.leaf{position:absolute;pointer-events:none;transform-origin:50% 92%;z-index:1;}
.hero .leaf-1{top:110px;left:8%;width:44px;animation:sway 6s ease-in-out infinite;}
.hero .leaf-2{top:220px;right:10%;width:58px;animation:sway2 8s ease-in-out infinite;}
.hero .leaf-3{bottom:120px;left:15%;width:36px;animation:sway 7s ease-in-out infinite .5s;}
.page-hero .lf1{top:56px;left:10%;width:38px;animation:sway 6s ease-in-out infinite;}
.page-hero .lf2{bottom:66px;right:11%;width:50px;animation:sway2 8s ease-in-out infinite;}
.hero-portrait .leaf-a{position:absolute;bottom:4px;right:4px;width:52px;transform-origin:50% 92%;animation:sway 6s ease-in-out infinite;z-index:2;}
.feat-thumb .lw{position:absolute;right:-20px;bottom:-24px;width:220px;opacity:.3;z-index:0;transform-origin:50% 92%;animation:sway 9s ease-in-out infinite;}
@media(max-width:760px){.hero .leaf-3{display:none;}}
@media(prefers-reduced-motion:reduce){.leaf,.leaf-a,.lw{animation:none !important;}}

/* hero: çok kısa ekranlarda esnesin */
@media(max-height:560px){
  .hero{min-height:auto;padding:56px 0 84px;}
  .hero-portrait{width:120px;}
  .scrollcue{display:none;}
}

/* ---- MOBİL MENÜ (hamburger + yandan açılan çekmece) ---- */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:9px;margin:-9px;border:0;background:transparent;cursor:pointer;border-radius:10px;}
.navtoggle span{display:block;width:24px;height:2px;border-radius:2px;background:var(--forest);
  transition:transform .3s ease,opacity .2s ease;}

.navdrawer{position:fixed;inset:0;z-index:60;visibility:hidden;opacity:0;
  transition:opacity .3s ease,visibility .3s ease;}
.navdrawer.open{visibility:visible;opacity:1;}
.navdrawer-overlay{position:absolute;inset:0;background:rgba(32,54,42,.45);}
.navdrawer-panel{position:absolute;top:0;right:0;height:100%;width:min(80vw,320px);
  background:var(--cream);box-shadow:-10px 0 40px rgba(32,54,42,.22);
  display:flex;flex-direction:column;padding:20px 22px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);}
.navdrawer.open .navdrawer-panel{transform:translateX(0);}
.navdrawer-close{align-self:flex-end;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--forest);cursor:pointer;border-radius:10px;}
.navdrawer-links{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.navdrawer-links a{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--forest);
  padding:14px 10px;border-radius:12px;border-bottom:1px solid var(--line);transition:background .2s,color .2s;}
.navdrawer-links a:last-child{border-bottom:0;}
.navdrawer-links a:hover,.navdrawer-links a.active{background:var(--cream-soft);color:var(--sage-dark);}

@media(max-width:860px){
  .navtoggle{display:flex;}
}
@media(min-width:861px){
  .navdrawer{display:none;}
}
/* çekmece açıkken arka plan kaymasın */
body.nav-open{overflow:hidden;}

/* ---- MAKALE: mobilde yatay boşluk (yazı kenara yapışmasın) ---- */
.article-wrap{padding-left:24px;padding-right:24px;}
@media(max-width:600px){
  .article-wrap{padding-left:20px;padding-right:20px;}
}

/* =========================================================
   HERO — dönüşüm odaklı yerleşim
   Okuma sırası: başlık → fotoğraf → CTA → etiketler
   ========================================================= */

/* 8px'lik dikey ritim. Hero içindeki her boşluk bu değerlerden birini kullanır;
   böylece blok tek parça okunur. Mobilde daha sıkı bir ölçek devreye girer. */
.hero{
  --sp-eyebrow: 16px;   /* üst etiket → başlık */
  --sp-title:   24px;   /* başlık → açıklama */
  --sp-desc:    32px;   /* açıklama → butonlar */
  --sp-cta:     16px;   /* butonlar → alt satır */
}

/* Mobil: tek sütun, ortalanmış (mevcut estetik korunur)
   Masaüstü: iki sütun — metin solda, fotoğraf sağda */
.hero-grid{display:grid;grid-template-columns:1fr;align-items:center;gap:24px;}
@media(min-width:900px){
  .hero{text-align:left;}
  /* Fotoğraf sütunu sabit genişlikte; kalan alan metne gider.
     Böylece satır uzunluğu ekran genişliğinden bağımsız olarak dengeli kalır. */
  .hero-grid{
    /* min(vw,vh): fotoğraf yeri olan ekranda büyür, kısa ekranda hero'yu
       taşırmaz. Sadece vw kullanılsaydı 1280x720'de 461px olup hero'yu
       ekran dışına iterdi; dikey alan yalnızca 422px. */
    grid-template-columns:minmax(0,1fr) clamp(288px,min(34vw,54vh),440px);
    gap:clamp(48px,6vw,96px);
    align-items:start;              /* fotoğraf hero'nun ortasında değil, başlıkla hizalı */
  }
  .hero-photo-col{order:2;padding-top:20px;}  /* üst etiket hizası; fotoğraf büyüdüğü için kısaldı */
  .hero-content{order:1;}
}

/* --- Fotoğraf --- */
.hero-portrait{width:clamp(172px,23vh,224px);margin:0 auto 24px;}
@media(min-width:900px){
  .hero-portrait{width:100%;margin:0 0 0 auto;}
  /* yumuşak, tek yönlü gölge — yüzer gibi değil, yerleşmiş dursun */
  .hero-portrait .photo-frame{box-shadow:0 24px 64px rgba(18,32,25,.34);}
}

/* --- Üst etiket ---
   Metin HTML'de zaten büyük harfle yazılı; otomatik büyütme kapalı.
   Sebep: text-transform Türkçe kuralıyla "Online" → "ONLİNE" yapıyordu. */
.hero .eyebrow{font-size:13.5px;letter-spacing:2.2px;color:#BED2C7;font-weight:700;
  text-transform:none;margin-bottom:var(--sp-eyebrow);}

/* --- Başlık: hero'nun en baskın öğesi ---
   max-width, başlığın 2-3 dengeli satıra sarmasını sağlar. */
.hero h1{font-size:clamp(32px,4.9vw,54px);line-height:1.12;
  letter-spacing:-0.022em;margin-bottom:var(--sp-title);}
@media(min-width:900px){.hero h1{max-width:11em;}}

/* --- Açıklama: ~60-65 karakterlik satır --- */
.hero .hero-desc{font-size:18px;line-height:1.65;
  color:rgba(255,255,255,.88);max-width:52ch;
  margin:0 auto var(--sp-desc);}
@media(min-width:900px){.hero .hero-desc{margin-left:0;}}

/* --- CTA: tek baskın çağrı --- */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;
  margin-bottom:var(--sp-cta);}
@media(min-width:900px){.hero-cta{justify-content:flex-start;}}

/* Birincil: dolu adaçayı zemin, koyu yeşil metin */
.hero .hero-cta .btn{background:var(--sage);color:#173425;
  font-weight:500;font-size:16px;padding:15px 30px;border-radius:999px;
  box-shadow:0 8px 24px rgba(94,122,106,.28);
  opacity:0;animation:fadeUp .8s ease .7s forwards;}
.hero .hero-cta .btn:hover{background:#9BB3A8;color:#132a1e;
  box-shadow:0 12px 30px rgba(94,122,106,.36);}

/* İkincil: buton değil, sade metin bağlantısı */
.hero-link{display:inline-block;font-size:15.5px;font-weight:500;
  color:rgba(255,255,255,.82);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.35);
  transition:color .22s,text-decoration-color .22s;
  opacity:0;animation:fadeUp .8s ease .78s forwards;}
.hero-link:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7);}

/* --- Alt satır: tek satır, sade metin --- */
/* .hero p kuralı özgüllük olarak daha güçlü olduğu için .hero ile niteleniyor */
.hero .hero-note{font-size:14px;color:rgba(255,255,255,.68);margin:0;
  opacity:0;animation:fadeUp .8s ease .88s forwards;}


/* --- Dekoratif yapraklar: içerikle yarışmasın --- */
.hero .leaf{opacity:.14;}
.hero .leaf-1{width:30px;}
.hero .leaf-2{width:38px;}
.hero .leaf-3{display:none;}
.hero-portrait .ring{opacity:.32;}
.hero-portrait .leaf-a{opacity:.55;}

/* --- İletişim sayfası: banner'a binen tek parça kart ---
   Kart yukarı çekilip dalganın üstüne biniyor; böylece banner ile içerik
   iki ayrı blok gibi durmuyor, tek bir öğe olarak okunuyor. */
/* display:flow-root şart: olmadan kartın negatif kenar boşluğu bölümden
   dışarı sızıp (margin collapse) tüm krem bölümü yukarı çekiyor ve
   banner'ın altındaki dalgayı örtüyordu. Blok biçimlendirme bağlamı
   kurulunca boşluk kartta kalıyor; dalga görünür, kart üstüne biniyor.
   Bindiği miktar (96px) ile alttaki krem boşluk eşit tutuldu. */
.iletisim-bolum{display:flow-root;padding-top:0;padding-bottom:96px;}
@media(max-width:680px){.iletisim-bolum{padding-bottom:72px;}}
.iletisim-kart{
  position:relative;z-index:2;margin:-96px auto 0;max-width:660px;
  background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:clamp(24px,3.4vw,36px);
  box-shadow:0 26px 60px rgba(34,49,42,.16);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,3vw,34px);align-items:center;}
@media(max-width:680px){
  .iletisim-kart{margin-top:-72px;grid-template-columns:1fr;
    justify-items:center;text-align:center;}
}

.iletisim-portre{margin:0;width:clamp(150px,20vw,196px);}
.iletisim-portre img{width:100%;height:auto;display:block;border-radius:18px;}
@media(max-width:680px){.iletisim-portre{width:170px;}}

.iletisim-ad{font-family:'Fraunces',serif;font-size:clamp(20px,2.4vw,24px);
  line-height:1.25;color:var(--forest);margin:0 0 18px;}
.iletisim-kanallar-acik{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:13px;}
.iletisim-kanallar-acik li{display:flex;align-items:center;gap:11px;}
@media(max-width:680px){.iletisim-kanallar-acik li{justify-content:center;}}
.iletisim-kanallar-acik svg{flex:0 0 auto;color:var(--sage-dark);}
.iletisim-kanallar-acik a{font-size:16.5px;font-weight:600;color:var(--forest);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(94,122,106,.35);
  transition:color .2s,text-decoration-color .2s;word-break:break-word;}
.iletisim-kanallar-acik a:hover{color:var(--forest-deep);text-decoration-color:var(--sage-dark);}

/* --- Görüşmeler bölümündeki oda fotoğrafı --- */
.gorusme-foto{margin:44px 0 0;}
.gorusme-foto img{width:100%;height:auto;display:block;border-radius:22px;
  box-shadow:0 18px 44px rgba(34,49,42,.14);}
@media(max-width:600px){
  .gorusme-foto{margin-top:28px;}
  .gorusme-foto img{border-radius:16px;}
}

/* --- Ana sayfa iletişim bloğu: e-posta + Instagram (koyu zemin) --- */
.iletisim-kanallar{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;}
.iletisim-kanallar li{display:inline-flex;align-items:center;gap:10px;}
.iletisim-kanallar svg{flex:0 0 auto;color:var(--sage);}
.iletisim-kanallar a{font-size:17px;font-weight:600;color:rgba(255,255,255,.9);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.35);
  transition:color .2s,text-decoration-color .2s;word-break:break-word;}
.iletisim-kanallar a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.75);}
@media(max-width:560px){.iletisim-kanallar{flex-direction:column;gap:18px;}}

/* --- Makale içi bağlantılar ---
   Genel kural (a{color:inherit;text-decoration:none}) bağlantıları düz
   metinle aynı gösteriyordu; yazı gövdesinde ayırt edilemiyorlardı.
   Yalnızca paragraf/liste içindekiler hedefleniyor — makaledeki buton,
   ilgili yazılar ve yazar kutusu bağlantıları kendi stilini korur. */
.article p a, .article ul li a, .postfaq .a a{
  color:var(--sage-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(94,122,106,.45);
  transition:color .2s,text-decoration-color .2s;}
.article p a:hover, .article ul li a:hover, .postfaq .a a:hover{
  color:var(--forest);text-decoration-color:var(--forest);}

/* --- Yazı başı görseli (front matter: image) --- */
.post-hero{max-width:720px;margin:0 auto 44px;}
.post-hero img{width:100%;height:auto;display:block;border-radius:22px;
  box-shadow:0 18px 44px rgba(34,49,42,.14);}
@media(max-width:600px){
  .post-hero{margin-bottom:32px;}
  .post-hero img{border-radius:16px;}
}

/* =========================================================
   METİN İÇİ VURGU
   Kalın yazı + kelimenin arkasına fosforlu kalem izi.
   Altın, bu tasarımda zaten vurgu rengi (hero'daki kalem çizgisi).
   Çizgi harflerin alt kısmından başlar; üstü açık kalınca metin
   boğulmuyor, arkadan geçen bir iz gibi duruyor.
   box-decoration-break: satır sonunda bölünse de iz her parçada sürer.
   ========================================================= */
.vurgu{
  font-weight:600;
  color:var(--forest-deep);
  /* İzin alt sınırı da belirtiliyor; yoksa satır kutusunun dibine kadar
     uzayıp metinden kopuyor ve altçizgi gibi görünüyor. */
  background-image:linear-gradient(to bottom,
    transparent 50%, rgba(216,166,76,.38) 50%,
    rgba(216,166,76,.38) 86%, transparent 86%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* koyu zeminli bölümlerde (sec-forest) aynı iz daha açık tonda */
.sec-forest .vurgu{color:#fff;
  background-image:linear-gradient(to bottom,
    transparent 50%, rgba(216,166,76,.45) 50%,
    rgba(216,166,76,.45) 86%, transparent 86%);}

/* Geniş ekranda hero'nun kabı genişler.
   Sebep: 1080px kapta fotoğraf büyüyünce metne 463px kalıyordu; başlık
   "Kendinizi anlamak / için" diye bölünüp iki tonlu gradyanı satır
   ortasından kesiyordu. Tek satır için 475px gerekiyor. */
@media(min-width:1280px){ .hero > .wrap{max-width:1240px;} }

/* --- Hero yüksekliği: sonraki bölümden bir parça görünsün --- */
@media(min-width:900px){
  .hero{min-height:calc(88vh - 76px);min-height:calc(88svh - 76px);
    padding:48px 0 88px;}
}

/* içerik yoğunlaştığı için küçük ekranlarda kaydırma oku gizlenir */
@media(max-width:899px){.scrollcue{display:none;}}

/* --- Mobil: CTA'nın ilk ekranda kalması için yoğunluk azaltıldı --- */
@media(max-width:600px){
  /* aynı ritim, bir kademe sıkı */
  .hero{--sp-eyebrow:8px; --sp-title:16px; --sp-desc:24px; --sp-cta:16px;
    padding:16px 0 48px;min-height:auto;}
  .hero-grid{gap:16px;}
  .hero-portrait{width:clamp(150px,20vh,176px);margin-bottom:8px;}
  .hero .eyebrow{font-size:12px;letter-spacing:1.6px;}
  .hero h1{font-size:clamp(27px,7.4vw,33px);}
  .hero .hero-desc{font-size:16px;line-height:1.6;}
  .hero-cta{gap:16px;}
  .hero .hero-cta .btn{padding:14px 26px;font-size:15px;}
  .hero-link{font-size:15px;}
  .hero .hero-note{font-size:13.5px;}
}


/* =========================================================
   HERO BAŞLIĞI — GRADYAN DOLGU  (Instagram sisteminden deneme)
   Şafak (sıcak) + Serin (soğuk) gradyanları, orman zemin üzerinde.
   Güvenlik sırası bilinçli:
     1) düz renk baştan verilir — CSS kısmen yüklenirse metin kaybolmaz
     2) gradyan yalnızca @supports içinde uygulanır
     3) yazdırmada ve zorunlu renk modunda düz renge dönülür
        (arka plan basılmadığı için gradyan başlık boş çıkardı)
   Gölge text-shadow ile DEĞİL, filter ile: dolgu şeffaf olduğu için
   text-shadow harfin içinden görünür ve metin kirli çıkar.
   ========================================================= */
.hero-grad .g1{color:#F9D8C0;}
.hero-grad .g2{color:#BCD8EE;}

@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero-grad .g1,.hero-grad .g2{
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    /* satır başına yeniden başlasın — kısa satır da gradyanın tamamını gezsin */
    -webkit-box-decoration-break:slice;box-decoration-break:slice;
    filter:drop-shadow(0 6px 20px rgba(11,24,16,.42));
  }
  .hero-grad .g1{background-image:linear-gradient(100deg,#F6EFB6 0%,#F9D8C0 38%,#F3A9CC 100%);}
  .hero-grad .g2{background-image:linear-gradient(100deg,#C9E9D3 0%,#BCD8EE 55%,#9FC0EA 100%);}
}

@media (forced-colors:active),print{
  .hero-grad .g1,.hero-grad .g2{
    background-image:none;filter:none;
    color:CanvasText;-webkit-text-fill-color:currentColor;}
}

/* Yuvarlak, tombul harf biçimi — Instagram kartlarındaki karakter.
   SOFT ve WONK eksenleri font isteğine head.html'de eklendi. */
.hero-grad{font-weight:700;font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144;}

/* =========================================================
   SAYFA VE BÖLÜM BAŞLIKLARI — TEK TONLU GRADYAN
   Hero iki tonlu (şafak + serin); burada tek ton kullanılıyor.
   Kademe böyle kuruluyor: iki ton = ana giriş, tek ton = diğer
   koyu zeminli başlıklar, düz beyaz = kart içi küçük başlıklar.

   Metin dinamik olduğu için (include.title, post başlıkları) hero
   gibi iki parçaya bölünemez; blok boyunca tek gradyan geçiyor.

   Seçici element+sınıf olarak yazıldı: `.page-hero h1{color:#fff}`
   kuralı (0,1,1) düz `.grad-title`'ı (0,1,0) yenerdi.
   Güvenlik sırası hero ile aynı: düz renk → @supports → yazdırma.
   Kontrast: en koyu durak #F3A9CC, orman zeminde 5.30:1 (AAA).
   ========================================================= */
h1.grad-title,h2.grad-title{color:#F9D8C0;}

@supports (background-clip:text) or (-webkit-background-clip:text){
  h1.grad-title,h2.grad-title{
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    background-image:linear-gradient(100deg,#F6EFB6 0%,#F9D8C0 45%,#F3A9CC 100%);
    filter:drop-shadow(0 5px 16px rgba(11,24,16,.34));}
}

@media (forced-colors:active),print{
  h1.grad-title,h2.grad-title{
    background-image:none;filter:none;
    color:CanvasText;-webkit-text-fill-color:currentColor;}
}

/* =========================================================
   MENÜDEKİ İLETİŞİM BUTONU (birincil çağrı)
   Menü çubuğu krem zeminde durduğu için hero'daki adaçayı buton
   burada işlemiyor: beyaz metin adaçayı üzerinde 2.70:1 kalıyor
   (WCAG normal metin eşiği 4.5:1). Dolu orman yeşili + beyaz metin
   9.80:1 veriyor ve krem çubuk üzerinde net seçiliyor.

   .navlinks mobilde gizleniyor; buton .nav-actions içinde durduğu
   için hamburger yanında görünür kalıyor.
   ========================================================= */
.nav-actions{display:flex;align-items:center;gap:14px;}

.nav-cta{display:inline-flex;align-items:center;gap:8px;
  background:var(--forest);color:#fff;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;
  padding:11px 22px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(44,74,56,.22);
  transition:background .22s,transform .22s,box-shadow .22s;}
.nav-cta:hover{background:var(--forest-deep);transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(44,74,56,.3);}
.nav-cta:active{transform:translateY(0);}
.nav-cta.active{background:var(--sage-dark);}
.nav-cta:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

/* Çubuk küçülünce buton da hafifçe toparlanır */
#nav.scrolled .nav-cta{padding:9px 20px;}

@media(max-width:520px){
  .nav-cta{font-size:13.5px;padding:9px 16px;}
  .nav-actions{gap:10px;}
}

/* Çekmecede: liste bağlantısı değil, tam genişlikte buton */
.drawer-cta{display:block;margin-top:18px;text-align:center;
  background:var(--forest);color:#fff;
  font-family:'Mulish',sans-serif;font-size:15.5px;font-weight:700;
  padding:14px 20px;border-radius:999px;border-bottom:0;
  transition:background .22s;}
.drawer-cta:hover{background:var(--forest-deep);color:#fff;}