/* Bi'tanıdık — light, mobile-first. Animations use only transform/opacity. */
:root{
  --bg:#faf7f1; --surface:#fff; --ink:#1f1a16; --muted:#5a5148; --line:#e6dccb;
  /* series colours: fills are dark enough for white text (>=4.6:1); --t is the same hue for small text on the page */
  --f-hikayeler:#C44A28; --t-hikayeler:#C44A28;   /* coral  */
  --f-bisoylesi:#1F7A8C; --t-bisoylesi:#1F7A8C;   /* teal   */
  --f-dusununce:#845AA8; --t-dusununce:#845AA8;   /* purple */
  --f-hasbihal:#9E6A00;  --t-hasbihal:#8A5A00;    /* ochre  */
  --on:#fff; --accent:#C44A28; --f:var(--f-bisoylesi); --t:var(--t-bisoylesi);
  --head:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --read:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --r:22px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#181512; --surface:#211d19; --ink:#f6efe4; --muted:#c2b8aa; --line:#383229;
  --t-hikayeler:#F0906C; --t-bisoylesi:#52B6C8; --t-dusununce:#BE96E0; --t-hasbihal:#F2C04A;
}}
.t-hikayeler,.c-hikayeler{--f:var(--f-hikayeler);--t:var(--t-hikayeler)}
.t-bisoylesi,.c-bisoylesi{--f:var(--f-bisoylesi);--t:var(--t-bisoylesi)}
.t-dusununce,.c-dusununce{--f:var(--f-dusununce);--t:var(--t-dusununce)}
.t-hasbihal,.c-hasbihal{--f:var(--f-hasbihal);--t:var(--t-hasbihal)}
@view-transition{navigation:auto}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.wrap-narrow{max-width:700px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:6px;padding:8px 14px;background:var(--ink);color:var(--bg);border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:4px;height:72px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;color:var(--ink)}
.brand img{height:54px;width:auto}
.nav{display:flex;align-items:center;gap:2px}
.nav a,.dd-btn{font:500 14.5px var(--sans);text-decoration:none;padding:8px 11px;border-radius:99px;border:0;background:none;color:var(--ink);cursor:pointer;white-space:nowrap}
.nav a:hover,.dd-btn:hover{background:var(--line)}
.nav .cta{background:var(--f-hikayeler);color:var(--on);margin-left:4px}
.nav .cta:hover{background:var(--f-hikayeler);opacity:.88}
.dd{position:relative}
.dd-menu{display:none;position:absolute;right:0;top:100%;min-width:210px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:block}
.dd-menu a{display:block;border-radius:10px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:0;background:none;color:var(--ink);cursor:pointer}
.icon-btn:hover{background:var(--line)}
.icon-btn svg{width:24px;height:24px}
.menu-btn{display:none}
@media(max-width:920px){
  .menu-btn{display:grid}
  .nav{position:fixed;inset:72px 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 40px;background:var(--bg);overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s}
  .nav.open{opacity:1;transform:none;visibility:visible}
  .nav a,.dd-btn{font:600 30px var(--head);padding:14px 4px;border-radius:0;text-align:left;width:100%;border-bottom:1px solid var(--line)}
  .nav .cta{margin:22px 0 0;background:var(--f-hikayeler);color:var(--on);text-align:center;border-radius:99px;font-size:20px;border:0}
  .dd-btn{pointer-events:none;font:600 13px var(--sans);color:var(--muted);text-transform:none;border:0;padding-top:26px}
  .dd-menu{display:block;position:static;border:0;box-shadow:none;background:none;padding:0}
  .dd-menu a{font:500 20px var(--head);color:var(--ink)}
  .nav .n-hikayeler{color:var(--t-hikayeler)}.nav .n-bisoylesi{color:var(--t-bisoylesi)}.nav .n-dusununce{color:var(--t-dusununce)}.nav .n-hasbihal{color:var(--t-hasbihal)}
}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.lite .rv{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:36px 0 40px}
.hero .wrap{position:relative;z-index:1}
.logo-hero{margin:0}
.logo-hero img{width:min(86vw,470px);height:auto;margin-left:-4px;animation:logoin 1s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes logoin{from{opacity:0;transform:translateY(24px) scale(.92) rotate(-2deg)}to{opacity:1;transform:none}}
.chat{display:flex;flex-direction:column;gap:10px;margin:26px 0 26px;max-width:420px}
.bub{margin:0;padding:12px 20px;border-radius:22px;font:600 clamp(18px,4.5vw,24px)/1.3 var(--head);width:fit-content;animation:pop .6s cubic-bezier(.2,.9,.3,1.4) both}
.bub.a{background:var(--f-bisoylesi);color:var(--on);border-bottom-left-radius:6px;animation-delay:.9s}
.bub.b{background:var(--f-hikayeler);color:var(--on);border-bottom-right-radius:6px;align-self:flex-end;animation-delay:1.7s}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(14px)}to{opacity:1;transform:none}}
.lead{font:400 italic clamp(17px,3.6vw,21px)/1.6 var(--head);color:var(--muted);max-width:34em;margin:0;animation:fade 1s 2.3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.bl{position:absolute;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;opacity:.3;animation:float 16s ease-in-out infinite alternate;will-change:transform}
.b1{width:min(60vw,420px);aspect-ratio:1;background:var(--f-hikayeler);right:-12%;top:-8%}
.b2{width:min(46vw,300px);aspect-ratio:1;background:var(--f-bisoylesi);right:18%;bottom:-14%;animation-duration:21s;animation-delay:-4s}
.b3{width:min(30vw,190px);aspect-ratio:1;background:var(--f-hasbihal);left:-6%;bottom:12%;animation-duration:13s;animation-delay:-8s}
@keyframes float{to{transform:translate(-26px,30px) rotate(40deg) scale(1.1)}}

/* ---------- category tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr);gap:16px}}
.tile,.chead{position:relative;overflow:hidden;background:var(--f);color:var(--on);isolation:isolate}
.tile{display:flex;flex-direction:column;gap:6px;padding:48px 16px 18px;border-radius:var(--r);text-decoration:none;min-height:190px;transition:transform .25s}
.tile:active{transform:scale(.97)}
@media(hover:hover){.tile:hover{transform:translateY(-4px) rotate(-.6deg)}.tile:hover .blob{transform:scale(1.25) rotate(30deg)}}
.tile h2{font-size:clamp(18px,5.8vw,34px);margin-top:auto;color:#fff}
.tile p{margin:0;font-size:13.5px;line-height:1.45}
.cnt{position:absolute;top:14px;right:14px;font:600 11.5px/1 var(--sans);padding:5px 9px;border-radius:99px;background:color-mix(in srgb,var(--on) 14%,transparent);color:inherit;opacity:.8}
.blob{position:absolute;z-index:-1;right:-30px;top:-30px;width:130px;height:130px;background:rgba(255,255,255,.14);border-radius:42% 58% 63% 37%/45% 40% 60% 55%;transition:transform .6s}


/* ---------- the path (timeline of posts) ---------- */
.path-sec{margin-top:44px}
.path{position:relative;padding-left:26px;margin-top:8px}
.path::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.path-fill{position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--f-hikayeler),var(--f-hasbihal),var(--f-dusununce),var(--f-bisoylesi));transform:scaleY(0);transform-origin:top;border-radius:2px}
.lite .path-fill{transform:scaleY(1)}
.row{position:relative;display:flex;gap:14px;align-items:center;padding:16px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;left:-26px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--f);transition:transform .25s}
.row:hover::before{transform:scale(1.5)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-meta{font:600 12px var(--sans);color:var(--t);display:flex;gap:6px;align-items:center;text-transform:none}
.row-meta .dot{display:none}
.row strong{overflow-wrap:anywhere;font:600 clamp(19px,4.8vw,24px)/1.25 var(--head);letter-spacing:-.01em}
.row:hover strong{text-decoration:underline;text-decoration-color:var(--f);text-decoration-thickness:2px;text-underline-offset:4px}
.row-ex{overflow-wrap:anywhere;color:var(--muted);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--line);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--f);transition:transform .35s}
.row:hover .row-img{transform:rotate(-8deg) scale(1.08)}
@media(min-width:700px){.path{padding-left:40px}.path::before,.path-fill{left:9px}.row::before{left:-38px}.row-img{width:76px;height:76px}.row{padding:20px 0}}
.more{display:grid;place-items:center;width:56px;height:56px;margin:26px auto 0;border-radius:50%;background:var(--ink);color:var(--bg);font-size:24px;text-decoration:none;transition:transform .25s}
.more:hover{transform:translateX(6px)}
.invite{margin:56px 0 24px;padding:clamp(26px,6vw,56px);border-radius:28px;background:var(--f-hikayeler);color:var(--on);display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.invite p{margin:0;font:600 clamp(20px,4.6vw,32px)/1.3 var(--head);max-width:26em}
.btn{display:inline-block;padding:13px 26px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 16px var(--sans);text-decoration:none;transition:transform .2s}
.btn:active{transform:scale(.96)}
.invite .btn{background:var(--ink);color:var(--bg)}

/* ---------- headers of lists ---------- */
.chead{padding:40px 0 36px;margin-bottom:10px}
.chead .wrap{position:relative}
.chead .cnt{top:-16px;right:18px}
.chead .blob{width:300px;height:300px;right:-80px;top:-90px;animation:float 18s ease-in-out infinite alternate}
.chead h1{font-size:clamp(42px,11.5vw,84px);color:#fff}
.chead p{margin:12px 0 0;max-width:30em;font-size:17px}
.err{display:block;font:600 clamp(70px,22vw,170px)/.9 var(--head);color:transparent;-webkit-text-stroke:2px var(--f-hikayeler);margin-bottom:18px}
.phead{padding:30px 0 6px}
.ptitle{font-size:clamp(34px,8vw,60px);margin-bottom:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{font:600 14.5px var(--sans);padding:10px 16px;border-radius:99px;border:2px solid var(--f);background:none;color:var(--t);cursor:pointer;min-height:44px}
.chip.on{background:var(--f);color:var(--on)}
.search{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:99px;padding:4px 18px}
.search svg{width:24px;height:24px;flex:none}
.search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:500 20px var(--sans);padding:12px 0;outline:none}
#count{font:600 14px var(--sans);color:var(--muted)}
.row mark{background:color-mix(in srgb,var(--f) 35%,transparent);color:inherit;border-radius:3px}

/* ---------- post ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:60;background:var(--f,var(--accent));transform:scaleX(0);transform-origin:left}
.post-head{padding-top:34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.post-img{width:88px;height:88px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--f);animation:pop .6s both}
.tag{font:700 13px var(--sans);letter-spacing:.04em;text-decoration:none;color:var(--t);padding:5px 14px;border-radius:99px;background:color-mix(in srgb,var(--f) 22%,transparent)}
.post-head h1{font-size:clamp(30px,8vw,52px);text-wrap:balance}
.meta{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:13.5px}
.meta span{display:inline-flex;gap:5px;align-items:center}.meta svg{width:16px;height:16px}
.prose{padding-top:26px;padding-bottom:20px;font:400 clamp(18px,4.6vw,20px)/1.8 var(--read);overflow-wrap:break-word}
.prose p{margin:0 0 1.25em}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:var(--head);margin:1.7em 0 .5em}
.prose h2{font-size:1.6em}.prose h3{font-size:1.35em}.prose h4,.prose h5{font-size:1.15em}
.prose a{color:var(--t);text-underline-offset:3px}
.prose blockquote{margin:1.5em 0;padding:2px 0 2px 18px;border-left:4px solid var(--f);color:var(--muted);font-style:italic}
.prose blockquote p{margin:.4em 0}
.prose img{width:auto;max-width:min(100%,520px);margin:1.4em auto;border-radius:16px}
.prose figure{margin:1.4em 0}.prose figcaption{font:13px var(--sans);color:var(--muted);text-align:center}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;height:auto}
.prose audio,.prose video{width:100%}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.25em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose .wp-block-columns{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin:1.6em 0}
.prose .wp-block-column{flex:1 1 220px}
.prose .wp-block-gallery{margin:0}
.prose .wp-block-gallery img{max-width:min(100%,260px);border-radius:50%;aspect-ratio:1;object-fit:cover}
.prose sup{font-size:.7em}
.prose .btn{color:var(--bg);text-decoration:none}

.endmark{display:flex;justify-content:center;margin:6px 0 0}
.endmark img{height:44px;width:auto}
.comments{margin-top:40px;padding-top:24px;border-top:2px solid var(--line)}
.comments h2{display:flex;align-items:center;gap:10px;font-size:26px;margin-bottom:14px}
.comments h2 svg{width:28px;height:28px;color:var(--t)}
.comments ul{list-style:none;margin:0;padding:0}
.comments ul ul{margin:10px 0 0 12px;padding-left:14px;border-left:2px solid var(--line)}
.comment{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px;margin-bottom:10px;font:15.5px/1.6 var(--sans)}
.comment p{margin:.35em 0 0}
.c-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.c-head time{font-size:12.5px;color:var(--muted)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:34px 0 10px}
.pn a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:18px;border:2px solid var(--line);text-decoration:none;min-height:72px}
.pn a:hover{border-color:var(--f)}.pn small{font-size:20px;color:var(--t);line-height:1}.pn span{font:600 16px/1.3 var(--head)}
.pn .prev{grid-column:1}.pn .next{grid-column:2;text-align:right}

/* ---------- footer: logo · social · email, one line ---------- */
.site-footer{margin-top:56px;border-top:1px solid var(--line)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.foot .brand{margin:0}.foot .brand img{height:40px}
.social{display:flex;gap:4px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);transition:background .2s}
.social a:hover{background:var(--line)}
.social svg{width:24px;height:24px}
.mail{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink)}
.mail svg{display:none;width:22px;height:22px}
.mail:hover span{text-decoration:underline}
@media(max-width:700px){.mail span{display:none}.mail svg{display:block}.mail{width:44px;height:44px;justify-content:center;border-radius:50%}.mail:hover{background:var(--line)}.foot .brand img{height:36px}}

/* ---------- page heroes ---------- */
.phero{position:relative;overflow:hidden;padding:46px 0 28px}
.phero .wrap,.phero .wrap-narrow{position:relative;z-index:1}
.pb1{width:200px;height:200px;background:var(--f-hikayeler);right:-50px;top:-70px}
.pb2{width:130px;height:130px;background:var(--f-hasbihal);right:120px;bottom:-60px;animation-delay:-6s}
.phero .bl{opacity:.2}
.ptitle{font-size:clamp(36px,9vw,64px);margin-bottom:4px}
.ptitle::after{content:"";display:block;width:84px;height:8px;margin-top:14px;border-radius:8px;background:linear-gradient(90deg,var(--f-hikayeler) 0 25%,var(--f-hasbihal) 25% 50%,var(--f-dusununce) 50% 75%,var(--f-bisoylesi) 75%)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:1fr;gap:18px;padding-top:18px}
@media(min-width:820px){.team{grid-template-columns:1fr 1fr;gap:22px}}
.member{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:84px 24px 26px;transition:transform .25s}
.member::before{content:"";position:absolute;left:0;right:0;top:0;height:86px;background:var(--f)}
.member::after{content:"";position:absolute;right:-24px;top:-34px;width:120px;height:120px;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;background:rgba(255,255,255,.22)}
@media(hover:hover){.member:hover{transform:translateY(-4px)}}
.m-photo{position:absolute;left:24px;top:24px;z-index:1;width:116px;height:116px;border-radius:50%;padding:5px;background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.m-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.member h2{position:relative;z-index:1;margin:-52px 0 0 156px;min-height:52px;font-size:clamp(22px,5vw,27px);letter-spacing:.01em;color:var(--on);display:flex;align-items:center}
.member p{margin:0 0 .8em;font-size:15.5px;line-height:1.7}
.member h2+p{margin-top:62px}
@media(max-width:420px){.member{padding-left:18px;padding-right:18px}.m-photo{left:18px;width:100px;height:100px}.member h2{margin-left:128px}}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.qa{background:var(--surface);border:2px solid var(--line);border-radius:22px;transition:border-color .2s,box-shadow .2s}
.qa[open]{border-color:var(--f);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.qa summary{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:64px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.q-n{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--f);color:var(--on);font:600 16px var(--head)}
.q{flex:1;font:600 clamp(18px,4.6vw,22px)/1.3 var(--head)}
.chev{flex:none;width:12px;height:12px;border-right:3px solid var(--t);border-bottom:3px solid var(--t);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;margin-right:6px}
.qa[open] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.qa .a{padding:2px 20px 20px 66px;font:400 17px/1.75 var(--read);animation:fade .35s both}
.qa .a p{margin:0 0 1em}.qa .a p:last-child{margin:0}
@media(max-width:560px){.qa .a{padding:2px 18px 18px}}

/* ---------- motion off ---------- */
.lite *,.lite *::before{animation:none!important;transition:none!important}
.lite .logo-hero img,.lite .bub,.lite .lead{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}.logo-hero img,.bub,.lead{opacity:1!important;transform:none!important}}