/* ============================================================
   Stikee sitesi — "STICKER DEFTERI"
   Zemin kesim mati, ogeler sokulup yapistirilan sticker'lar,
   notlar el yazisi. Renkler uygulamanin temalari (lib/theme.dart):
   html[data-tema] degisince tum site o renge burunur.
   ============================================================ */

@font-face { font-family:"Nunito"; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url(fonts/nunito-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url(fonts/nunito-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Caveat"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/caveat-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Caveat"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/caveat-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tema (uygulamadaki 5 tema) ---------- */
:root, html[data-tema="mor"] { --pri:#7C3AED; --pri-deep:#6D28D9; --pri-light:#A78BFA; --pri-koyu:#5B21B6; --lila:#F1EAFE; --bg:#FAF8FF; }
html[data-tema="pembe"]   { --pri:#EC4899; --pri-deep:#BE185D; --pri-light:#F9A8D4; --pri-koyu:#9D174D; --lila:#FDE7F1; --bg:#FFF7FB; }
html[data-tema="mavi"]    { --pri:#2563EB; --pri-deep:#1D4ED8; --pri-light:#93C5FD; --pri-koyu:#1E3A8A; --lila:#E7EEFE; --bg:#F7FAFF; }
html[data-tema="yesil"]   { --pri:#059669; --pri-deep:#047857; --pri-light:#6EE7B7; --pri-koyu:#065F46; --lila:#E7F8F1; --bg:#F6FDFA; }
html[data-tema="turuncu"] { --pri:#EA580C; --pri-deep:#C2410C; --pri-light:#FDBA74; --pri-koyu:#9A3412; --lila:#FEEEE2; --bg:#FFFAF6; }

:root {
  --card:#FFFFFF; --ink:#1E1B2E; --soft:#5A5470; --line:#E9E4F5;
  --pink:#EC4899; --sari:#FFE27A; --mint:#10B981;
  --on-pri:#FFFFFF; --murekkep:#1E1B2E;
  --izgara:color-mix(in srgb, var(--pri) 9%, transparent);
  --golge:0 2px 0 rgba(30,27,46,.06), 0 12px 28px color-mix(in srgb, var(--pri-deep) 14%, transparent);
  --golge-buyuk:0 28px 60px color-mix(in srgb, var(--pri-deep) 24%, transparent);
  --kesim:#FFFFFF; /* sticker kenari */
  --vurgu:var(--pri-deep); /* renkli yazi */
  /* Uygulamadaki gecisler */
  --gecis:linear-gradient(135deg, var(--pri), var(--pri-deep));                 /* banner, dugme */
  --gecis-premium:linear-gradient(135deg, var(--pri-light), var(--pri-deep));   /* premium karti, avatar */
  --gecis-acilis:linear-gradient(135deg, var(--pri-deep), var(--pri-koyu));     /* acilis ekrani (yazi okunur kalsin diye koyu uc) */
  --halka:linear-gradient(135deg, #F9A8D4, #A78BFA, #7C3AED);                   /* hikaye halkasi */
  --gokkusagi:linear-gradient(90deg, #EF4444, #F97316, #FBBF24, #22C55E, #3B82F6, #7C3AED); /* "Renkli" yazi stili */
  --isilti:0 8px 22px color-mix(in srgb, var(--pri) 38%, transparent);           /* renkli golge */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card:#1C1828; --ink:#F2EDFB; --soft:#BDB5D0; --line:#302944; --murekkep:#F2EDFB;
    --bg:#120F1B; --lila:color-mix(in srgb, var(--pri) 22%, #1C1828);
    --izgara:color-mix(in srgb, var(--pri-light) 8%, transparent);
    --golge:0 2px 0 rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.4);
    --golge-buyuk:0 28px 60px rgba(0,0,0,.5);
    --kesim:#F4F1FA;
    --vurgu:var(--pri-light);
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body { margin:0; color:var(--ink); overflow-x:clip;
  background-color:var(--bg);
  background-image:linear-gradient(var(--izgara) 1px, transparent 1px), linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size:36px 36px;
  font:500 17px/1.65 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition:background-color .4s; }
img { max-width:100%; height:auto; }
a { color:var(--vurgu); text-underline-offset:3px; }
h1, h2, h3 { line-height:1.1; letter-spacing:-.02em; font-weight:900; margin:0; }
:focus-visible { outline:3px solid var(--pink); outline-offset:3px; border-radius:10px; }
html[data-dil="tr"] .en, html[data-dil="en"] .tr { display:none !important; }

.kap { width:100%; max-width:1160px; margin:0 auto; padding:0 16px; }
.atla { position:absolute; left:-999px; top:8px; z-index:100; background:var(--card); color:var(--ink); padding:10px 16px; border-radius:12px; }
.atla:focus { left:8px; }
.el { font-family:"Caveat", "Segoe Print", cursive; font-weight:700; letter-spacing:0; }

/* ---------- "Sticker": beyaz kesim kenari + golge ---------- */
.sticker { display:inline-block; line-height:1;
  filter:drop-shadow(3px 0 0 var(--kesim)) drop-shadow(-3px 0 0 var(--kesim)) drop-shadow(0 3px 0 var(--kesim))
         drop-shadow(0 -3px 0 var(--kesim)) drop-shadow(0 8px 10px rgba(30,27,46,.25)); }

/* Kesim karti: kalin beyaz kenar + kalkik kose */
.kesik { position:relative; background:var(--card); border:6px solid var(--kesim); border-radius:28px;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--ink) 8%, transparent), var(--golge); }
.kalkik::after { content:""; position:absolute; right:-6px; bottom:-6px; width:46px; height:46px;
  border-radius:0 0 26px 0; pointer-events:none;
  background:linear-gradient(135deg, transparent 49%, #E6E2EE 50%, #fff 72%);
  box-shadow:-3px -3px 6px rgba(30,27,46,.12); clip-path:polygon(100% 0, 100% 100%, 0 100%);
  transition:width .25s, height .25s; }
.kalkik:hover::after { width:70px; height:70px; }

/* Bant (washi) */
.bant { position:absolute; top:-14px; left:50%; width:110px; height:28px; translate:-50% 0; rotate:-3deg; z-index:2;
  background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--pri-light) 70%, transparent) 0 8px, color-mix(in srgb, var(--pri-light) 45%, transparent) 8px 16px);
  box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* ---------- Dugmeler ---------- */
.buton { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
  padding:12px 28px; border-radius:20px; background:var(--gecis); color:#fff; text-decoration:none;
  border:0; cursor:pointer; font:inherit; font-size:1.06rem; font-weight:900;
  box-shadow:var(--isilti); transition:transform .18s, box-shadow .2s; }
.buton:hover { transform:translateY(-3px); box-shadow:0 14px 30px color-mix(in srgb, var(--pri) 45%, transparent); }
.buton:active { transform:translateY(0) scale(.97); }
.buton.kucuk { min-height:44px; padding:7px 18px; font-size:.95rem; border-radius:16px; }
.buton.acik { background:var(--card); color:var(--vurgu); box-shadow:0 0 0 2px var(--line), var(--golge); }

.indir { display:inline-flex; align-items:center; gap:12px; background:#0F0B18; color:#fff; text-decoration:none;
  padding:10px 22px 10px 18px; border-radius:18px; min-height:60px;
  box-shadow:0 10px 24px rgba(15,11,24,.22); transition:transform .18s, box-shadow .2s; }
.indir:hover { transform:translateY(-3px); box-shadow:0 16px 30px rgba(15,11,24,.28); }
.indir:active { transform:translateY(0) scale(.97); }
.indir svg { width:28px; height:28px; flex:none; }
.indir small { display:block; font-size:.72rem; font-weight:700; opacity:.85; line-height:1.1; }
.indir b { display:block; font-size:1.15rem; line-height:1.2; font-weight:900; }

/* ---------- Ust cubuk ---------- */
header.ust { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); box-shadow:0 -4px 12px rgba(30,27,46,.04); }
.ust-ic { display:flex; align-items:center; gap:14px; height:70px; }
.marka { display:inline-flex; align-items:center; gap:10px; font-weight:1000; font-size:1.45rem; color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
.marka img { border-radius:12px; rotate:-6deg; transition:rotate .3s; box-shadow:0 0 0 3px var(--kesim), 0 6px 14px rgba(30,27,46,.2); }
.marka:hover img { rotate:6deg; }
.menu { display:flex; gap:2px; margin-left:auto; }
.menu a { position:relative; color:var(--soft); font-weight:800; text-decoration:none; padding:10px 13px; transition:color .2s; }
.menu a::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:8px; opacity:0; transition:opacity .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8'%3E%3Cpath d='M1 5c8-5 14 3 22-1s14-4 22 0 10 2 14-1' fill='none' stroke='%23EC4899' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.menu a:hover, .menu a[aria-current="page"] { color:var(--ink); }
.menu a:hover::after, .menu a[aria-current="page"]::after { opacity:1; }
.ust-sag { display:flex; align-items:center; gap:10px; }
.dil { display:flex; gap:2px; background:var(--card); padding:3px; border-radius:999px; border:2px solid var(--line); }
.dil button { border:0; background:transparent; color:var(--soft); font:inherit; font-weight:900; font-size:.82rem;
  min-width:44px; min-height:36px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
html[data-dil="tr"] .dil [data-d="tr"], html[data-dil="en"] .dil [data-d="en"] { background:var(--gecis); color:#fff; box-shadow:0 4px 10px color-mix(in srgb, var(--pri) 35%, transparent); }

/* ---------- Kahraman ---------- */
.hero { position:relative; padding:56px 0 96px; color:var(--ink); isolation:isolate;
  background:
    radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--pri-light) 30%, transparent), transparent 40%),
    radial-gradient(circle at 8% 90%, rgba(249,168,212,.22), transparent 35%); }
.hero::after { content:none; }
.hero-ic { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.hero h1 { font-size:clamp(2.6rem, 6.4vw, 5rem); line-height:1.04; margin:0 0 22px; }
.hero h1 .etiket { display:inline-block; padding:.02em .28em .1em; margin:.08em 0; border-radius:.32em; color:#fff;
  background:var(--gecis); rotate:-3deg; box-shadow:0 0 0 .08em #fff, 0 .14em .34em color-mix(in srgb, var(--pri) 40%, transparent); }
.hero h1 .etiket.iki { rotate:2deg; background:var(--pink); box-shadow:0 0 0 .08em #fff, 0 .14em .34em rgba(236,72,153,.38); }
.hero h1 .etiket.iki b { font-weight:inherit; }
.hero p.alt { font-size:1.2rem; color:var(--soft); margin:0 0 30px; max-width:31em; }
.hero-eylem { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; }
.not-ok { display:inline-flex; align-items:center; gap:6px; font-size:1.55rem; color:var(--vurgu); rotate:-4deg; }
.not-ok svg { width:54px; height:34px; flex:none; }
.artilar { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.artilar > span { background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:5px 14px; font-weight:800; font-size:.92rem; box-shadow:0 2px 8px rgba(109,40,217,.06); }
.artilar > span::before { content:"✓ "; color:var(--pri); font-weight:1000; }

/* Sticker tabakasi (surukle-birak) */
.tabaka-kap { position:relative; justify-self:center; width:min(440px, 100%); }
.tabaka { position:relative; background-color:var(--card); color:var(--ink); border-radius:28px; padding:26px 22px 22px; rotate:2deg;
  border:1.5px solid var(--line); box-shadow:0 24px 60px color-mix(in srgb, var(--pri) 22%, transparent);
  background-image:radial-gradient(color-mix(in srgb, var(--pri) 14%, transparent) 1.4px, transparent 1.6px); background-size:14px 14px; }
.tabaka-bas { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; margin:0 4px 14px; gap:2px 10px; }
.tabaka-bas > * { white-space:nowrap; }
.tabaka-bas b { font-weight:1000; font-size:1.05rem; }
.tabaka-bas span { font-size:1.35rem; color:var(--soft); }
.yuvalar { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.yuva { aspect-ratio:1; border-radius:22px; border:2.5px dashed color-mix(in srgb, var(--pri) 35%, transparent);
  display:grid; place-items:center; background:color-mix(in srgb, var(--bg) 70%, transparent); }
.soy { font-size:clamp(44px, 8vw, 64px); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  transition:scale .18s, rotate .25s, filter .2s; }
.soy:hover { scale:1.08; rotate:-6deg; }
.soy.tutuluyor { cursor:grabbing; scale:1.25; rotate:8deg; transition:scale .18s, rotate .25s;
  filter:drop-shadow(3px 0 0 var(--kesim)) drop-shadow(-3px 0 0 var(--kesim)) drop-shadow(0 3px 0 var(--kesim)) drop-shadow(0 -3px 0 var(--kesim)) drop-shadow(0 22px 18px rgba(30,27,46,.35)); }
.soy.serbest { position:absolute; z-index:40; }
.soy.yapisti { animation:yapis .35s ease-out; }
@keyframes yapis { 0% { scale:1.25; } 55% { scale:.88; } 100% { scale:1; } }
.tabaka-not { position:absolute; left:-24px; bottom:-60px; font-size:1.6rem; color:var(--pink); rotate:-6deg; display:flex; align-items:center; gap:4px; }
.tabaka-not svg { width:46px; height:40px; flex:none; }
.topla { position:absolute; right:0; bottom:-56px; background:none; border:0; color:var(--soft); font:inherit; font-weight:800;
  font-size:.92rem; cursor:pointer; padding:10px; min-height:44px; opacity:0; pointer-events:none; transition:opacity .3s; }
.topla.gorunur { opacity:1; pointer-events:auto; }
.topla:hover { color:var(--pri); }

/* Kayan serit: el yazisi bant */
.serit { overflow:hidden; padding:14px 0; background:var(--lila); color:var(--vurgu); rotate:-1.2deg; margin:0 -20px;
  border-block:1.5px solid color-mix(in srgb, var(--pri) 18%, transparent); }
.serit-ic span { font-size:2rem; white-space:nowrap; }
.serit-ic { display:flex; align-items:center; gap:34px; width:max-content; animation:kay 38s linear infinite; }
.serit-ic span { font-size:2rem; white-space:nowrap; }
.serit-ic i { font-style:normal; font-size:34px; }
@keyframes kay { to { translate:-50% 0; } }

/* ---------- Bolum basliklari ---------- */
section.blok { padding:100px 0; position:relative; }
.blok-bas { max-width:720px; margin:0 0 50px; }
.blok-bas.orta { text-align:center; margin-inline:auto; }
.blok-bas .el { font-size:1.7rem; color:var(--pink); display:block; rotate:-2deg; margin-bottom:4px; }
.blok-bas h2 { font-size:clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom:14px; }
.blok-bas p { color:var(--soft); margin:0; font-size:1.12rem; }
.kalem { color:var(--vurgu); }

/* ---------- Once / Sonra ---------- */
.oncesonra { display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.karsilastir { position:relative; aspect-ratio:1; border-radius:30px; overflow:hidden; border:6px solid var(--kesim);
  box-shadow:0 0 0 2px var(--line), var(--golge-buyuk); rotate:-1.5deg; --k:50%; user-select:none; max-width:520px; width:100%; justify-self:center; }
.katman { position:absolute; inset:0; display:grid; place-items:center; }
.foto { background:
    radial-gradient(circle at 78% 22%, #FFE58A 0 9%, transparent 9.5%),
    radial-gradient(ellipse 70% 30% at 20% 100%, #4ADE80 0 60%, transparent 61%),
    radial-gradient(ellipse 80% 34% at 85% 100%, #22C55E 0 60%, transparent 61%),
    linear-gradient(#7DD3FC, #BAE6FD 55%, #FDE68A); }
.foto::before { content:""; position:absolute; left:8%; top:16%; width:22%; height:9%; border-radius:999px; background:rgba(255,255,255,.85);
  box-shadow:34px 12px 0 -4px rgba(255,255,255,.8); }
.seffaf { background-color:#fff; background-image:linear-gradient(45deg,#E8E5F0 25%,transparent 25%,transparent 75%,#E8E5F0 75%),
  linear-gradient(45deg,#E8E5F0 25%,transparent 25%,transparent 75%,#E8E5F0 75%); background-size:28px 28px; background-position:0 0,14px 14px;
  clip-path:inset(0 0 0 var(--k)); }
.karsilastir .ozne { font-size:clamp(120px, 22vw, 230px); line-height:1; }
.seffaf .ozne { filter:drop-shadow(7px 0 0 #fff) drop-shadow(-7px 0 0 #fff) drop-shadow(0 7px 0 #fff) drop-shadow(0 -7px 0 #fff) drop-shadow(0 14px 16px rgba(30,27,46,.3)); }
.cizgi { position:absolute; top:0; bottom:0; left:var(--k); width:4px; translate:-2px 0; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08); pointer-events:none; }
.cizgi::after { content:"⟷"; position:absolute; top:50%; left:50%; translate:-50% -50%; width:50px; height:50px; border-radius:50%;
  background:#fff; color:#1E1B2E; display:grid; place-items:center; font-weight:900; font-size:22px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.karsilastir input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.rozet-k { position:absolute; top:16px; padding:4px 12px; border-radius:999px; font-weight:900; font-size:.85rem; background:rgba(15,11,24,.72); color:#fff; pointer-events:none; }
.rozet-k.sol { left:16px; } .rozet-k.sag { right:16px; }
.karsilastir:has(input:focus-visible) { outline:3px solid var(--pink); outline-offset:4px; }
.madde-liste { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:16px; }
.madde-liste li { display:flex; gap:14px; align-items:flex-start; font-weight:700; }
.madde-liste li .sticker { font-size:30px; flex:none; }

/* ---------- Ozellik sticker'lari ---------- */
.yapistir { display:grid; grid-template-columns:repeat(6,1fr); gap:44px 26px; padding-top:20px; }
.oz { grid-column:span 2; padding:30px 26px 28px; background:var(--zemin, var(--card)); color:#1E1B2E; transition:rotate .3s, translate .3s; }
.oz:nth-child(1) { grid-column:span 3; rotate:-1.5deg; --zemin:#EDE4FF; }
.oz:nth-child(2) { grid-column:span 3; rotate:1.2deg; --zemin:#FFE3EF; }
.oz:nth-child(3) { rotate:1deg; --zemin:#DDEBFF; }
.oz:nth-child(4) { rotate:-1.2deg; --zemin:#D8F5E8; }
.oz:nth-child(5) { rotate:1.6deg; --zemin:#FFE9D6; }
.oz:nth-child(6) { grid-column:2 / span 4; rotate:-.8deg; --zemin:#FFF4C2; }
.oz:hover { rotate:0deg; translate:0 -4px; }
.oz > .sticker { position:absolute; top:-34px; right:22px; font-size:62px; rotate:10deg; transition:rotate .3s, scale .3s; }
.oz:hover > .sticker { rotate:-8deg; scale:1.1; }
.oz h3 { font-size:1.4rem; margin-bottom:8px; padding-right:70px; }
.oz p { margin:0; color:#4A4560; }
.oz .el { display:inline-block; margin-top:10px; font-size:1.4rem; color:#BE185D; rotate:-2deg; }

/* ---------- Sohbet ---------- */
.sohbet-bolum { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sohbet { position:relative; max-width:400px; justify-self:center; width:100%; border-radius:34px; overflow:hidden;
  border:7px solid #fff; box-shadow:0 0 0 1.5px var(--line), 0 30px 60px color-mix(in srgb, var(--pri) 30%, transparent); background:#F6F2FF; rotate:1.5deg; }
.sohbet-bas { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--gecis); color:#fff; }
.sohbet-bas .av { width:42px; height:42px; border-radius:50%; background:#FFE27A; display:grid; place-items:center; font-size:22px;
  box-shadow:0 0 0 2px #fff, 0 0 0 4.5px #F9A8D4; }
.sohbet-bas b { display:block; font-weight:900; } .sohbet-bas small { opacity:.75; font-size:.8rem; }
.sohbet-akis { padding:16px 14px 20px; display:flex; flex-direction:column; gap:8px; min-height:500px;
  background-image:radial-gradient(rgba(30,27,46,.07) 1.2px, transparent 1.4px); background-size:16px 16px; }
.mesaj { max-width:80%; padding:8px 12px 6px; border-radius:16px; font-size:.95rem; line-height:1.4; color:#1E1B2E; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.mesaj small { display:block; text-align:right; font-size:.7rem; opacity:.55; margin-top:2px; }
.mesaj .kim { display:block; font-weight:900; font-size:.78rem; color:#BE185D; }
.mesaj .kim.m { color:#2563EB; }
.gelen { align-self:flex-start; background:#fff; border-top-left-radius:4px; }
.giden { align-self:flex-end; background:color-mix(in srgb, var(--pri) 15%, #fff); border-top-right-radius:4px; }
.mesaj.st { background:none; box-shadow:none; padding:4px; font-size:88px; line-height:1; }
.js .sohbet .mesaj { opacity:0; translate:0 14px; scale:.9; }
.js .sohbet.gor .mesaj { animation:dus .45s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay:calc(var(--s) * .75s); }
@keyframes dus { to { opacity:1; translate:0 0; scale:1; } }
.alinti { font-size:clamp(2rem, 4.2vw, 3rem); font-weight:1000; line-height:1.1; margin:0 0 18px; }
.alinti .el { display:block; font-size:.6em; color:var(--pink); margin-top:12px; font-weight:700; rotate:-1.5deg; }

/* ---------- Adimlar: cizgi roman ---------- */
.roman { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.kare { position:relative; background:var(--card); border:2px solid var(--line); border-radius:24px; padding:62px 22px 24px; min-height:300px;
  box-shadow:var(--golge); overflow:hidden; display:flex; flex-direction:column; transition:translate .25s, box-shadow .25s; }
.kare:hover { translate:0 -4px; box-shadow:var(--golge-buyuk); }
.kare::before { content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--pri) 32%, transparent) 1.5px, transparent 1.7px); background-size:10px 10px;
  -webkit-mask:linear-gradient(160deg, transparent 40%, #000); mask:linear-gradient(160deg, transparent 40%, #000); }
.kare:nth-child(1) { rotate:-1deg; } .kare:nth-child(2) { rotate:.8deg; translate:0 14px; } .kare:nth-child(3) { rotate:-.6deg; }
.kare .no { position:absolute; top:16px; left:18px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--gecis-premium); color:#fff; font-weight:1000; font-size:1.05rem; z-index:1; box-shadow:var(--isilti); }
.balon { position:relative; z-index:1; align-self:flex-start; background:var(--lila); color:var(--vurgu); border-radius:20px 20px 20px 6px;
  padding:6px 16px; font-size:1.45rem; line-height:1.2; margin-left:46px; }
.kare > .sticker { position:relative; z-index:1; font-size:76px; margin:24px 0 12px; align-self:center; }
.kare h3 { position:relative; z-index:1; font-size:1.3rem; margin-bottom:4px; }
.kare p { position:relative; z-index:1; margin:0; color:var(--soft); }

/* ---------- Temalar: siteyi boya ---------- */
.boyalar { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.boya { position:relative; width:150px; padding:16px 12px 14px; border-radius:24px; border:5px solid #fff; cursor:pointer;
  background:var(--t3); color:#1E1B2E; font:inherit; box-shadow:0 0 0 1.5px var(--line), var(--golge); transition:translate .2s, rotate .2s, box-shadow .2s; }
.boya:nth-child(odd) { rotate:-3deg; } .boya:nth-child(even) { rotate:3deg; }
.boya:hover { translate:0 -6px; rotate:0deg; }
.boya .top { width:62px; height:62px; margin:0 auto 10px; border-radius:50%; background:conic-gradient(from 210deg, var(--t1), var(--t2), var(--t1));
  display:grid; place-items:center; font-size:28px; box-shadow:inset 0 -6px 0 rgba(0,0,0,.12); }
.boya b { display:block; font-weight:900; font-size:.98rem; }
.boya[aria-pressed="true"] { box-shadow:0 0 0 4px var(--t1), 0 18px 34px color-mix(in srgb, var(--t1) 40%, transparent); translate:0 -6px; rotate:0deg; }
.boya[aria-pressed="true"]::after { content:"✓"; position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%;
  background:var(--t1); color:#fff; display:grid; place-items:center; font-weight:1000; box-shadow:0 0 0 3px #fff; }
.boya-not { text-align:center; margin-top:30px; font-size:1.55rem; color:var(--soft); }

/* ---------- Blog: polaroid ---------- */
.polaroidler { display:grid; grid-template-columns:repeat(3,1fr); gap:50px 30px; padding-top:16px; }
.polaroid { position:relative; background:var(--card); padding:14px 14px 22px; border-radius:6px; box-shadow:var(--golge);
  border:1.5px solid var(--line); transition:rotate .3s, translate .3s, box-shadow .3s; }
.polaroidler > :nth-child(3n+1) .polaroid { rotate:-2deg; }
.polaroidler > :nth-child(3n+2) .polaroid { rotate:1.5deg; translate:0 12px; }
.polaroidler > :nth-child(3n) .polaroid { rotate:-1deg; }
.polaroidler .polaroid:hover { rotate:0deg; translate:0 -6px; box-shadow:var(--golge-buyuk); }
.p-foto { aspect-ratio:4/3; border-radius:3px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 50%), linear-gradient(140deg, var(--k1), var(--k2)); }
.p-foto .sticker { font-size:84px; rotate:-8deg; transition:rotate .35s, scale .35s; }
.polaroid:hover .p-foto .sticker { rotate:6deg; scale:1.1; }
.polaroid .tarih { display:block; font-size:1.3rem; color:var(--soft); margin:12px 4px 2px; }
.polaroid h3 { font-size:1.22rem; line-height:1.25; margin:0 4px 6px; }
.polaroid h3 a { color:var(--ink); text-decoration:none; }
.polaroid h3 a::after { content:""; position:absolute; inset:0; }
.polaroid p { margin:0 4px; color:var(--soft); font-size:.97rem; line-height:1.55; }
.bos { text-align:center; padding:56px 20px; }
.bos .sticker { font-size:70px; display:block; margin-bottom:14px; }
.bos h3 { margin-bottom:6px; font-size:1.5rem; }
.bos p { color:var(--soft); margin:0 0 20px; }

/* ---------- SSS: sohbet balonlari ---------- */
.sss { max-width:780px; margin:0 auto; display:grid; gap:18px; }
.sss details { display:block; }
.sss summary { display:block; width:fit-content; list-style:none; cursor:pointer; max-width:88%; background:var(--card); border:2px solid var(--line);
  border-radius:22px 22px 22px 6px; padding:14px 20px; font-weight:900; font-size:1.08rem; min-height:44px;
  box-shadow:var(--golge); transition:translate .15s, box-shadow .2s, border-color .2s; }
.sss summary::-webkit-details-marker { display:none; }
.sss summary::after { content:" 💬"; }
.sss summary:hover { translate:0 -2px; border-color:var(--pri-light); }
.sss details[open] summary { border-color:var(--pri-light); }
.sss details[open] summary::after { content:""; }
.sss details p { width:fit-content; max-width:86%; margin:12px 0 4px auto; background:var(--gecis); color:#fff; box-shadow:var(--isilti);
  border-radius:22px 22px 6px 22px; padding:14px 20px; animation:dus .35s cubic-bezier(.2,1.4,.4,1); }
.sss details p a { color:inherit; font-weight:900; }

/* ---------- Son cagri: dev sticker ---------- */
.dev { position:relative; max-width:900px; margin:0 auto; padding:64px 30px; text-align:center; rotate:-1.5deg;
  color:#fff; border:10px solid #fff; border-radius:48px;
  box-shadow:0 0 0 2px var(--line), 0 34px 70px color-mix(in srgb, var(--pri) 35%, transparent);
  background:radial-gradient(circle at 12% 15%, rgba(255,255,255,.18), transparent 45%), var(--gecis); }
.dev h2 { font-size:clamp(2.2rem, 5vw, 3.6rem); margin-bottom:12px; }
.dev p { margin:0 auto 30px; max-width:30em; font-size:1.12rem; color:rgba(255,255,255,.95); }
.dev .indir { box-shadow:5px 5px 0 rgba(15,11,24,.35); }
.dev .ucan { position:absolute; font-size:58px; animation:yuz 6s ease-in-out infinite; }
.dev .u1 { top:-34px; left:8%; rotate:-14deg; } .dev .u2 { top:-28px; right:10%; rotate:12deg; animation-delay:-2s; }
.dev .u3 { bottom:-30px; left:18%; rotate:10deg; animation-delay:-4s; } .dev .u4 { bottom:-34px; right:22%; rotate:-10deg; animation-delay:-3s; }
@keyframes yuz { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }
.dev.kalkik::after { border-radius:0 0 38px 0; right:-10px; bottom:-10px; width:90px; height:90px; }
.dev.kalkik:hover::after { width:130px; height:130px; }

/* ---------- Blog sayfasi + yazi ---------- */
.sayfa-bas { position:relative; padding:64px 0 36px; text-align:center; }
.sayfa-bas .el { font-size:1.8rem; color:var(--pink); display:block; rotate:-2deg; }
.sayfa-bas h1 { font-size:clamp(2.3rem, 5.6vw, 4rem); margin:6px auto 14px; max-width:14em; }
.sayfa-bas p.alt { color:var(--soft); margin:0 auto; max-width:36em; font-size:1.12rem; }
.yol { font-size:.92rem; font-weight:800; color:var(--soft); }
.yol a { color:var(--soft); text-decoration:none; } .yol a:hover { color:var(--pri-deep); }
.yazi-bas h1 { max-width:17em; }
.yazi-kapak { display:inline-grid; place-items:center; width:150px; height:150px; margin:26px 0 10px; border-radius:50%; rotate:-5deg;
  border:6px solid #fff; box-shadow:0 0 0 5px #F9A8D4, 0 0 0 10px #A78BFA, var(--golge-buyuk);
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 50%), linear-gradient(140deg, var(--k1), var(--k2)); }
.yazi-kapak .sticker { font-size:80px; rotate:8deg; }
.yazi-meta { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-size:1.45rem; color:var(--soft); }
.yazi-meta span + span::before { content:"✦"; color:var(--pink); margin-right:18px; }

.yazi-duzen { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:44px; padding:30px 16px 24px; align-items:start; }
.kagit { position:relative; background:var(--card); border-radius:10px; padding:52px clamp(20px, 5vw, 60px) 44px;
  box-shadow:0 1px 0 var(--line), 0 18px 40px color-mix(in srgb, var(--pri-deep) 10%, transparent); border:1.5px solid var(--line); }
.kagit > .bant { width:150px; top:-15px; }
.yazi { font-size:1.12rem; line-height:1.85; }
.yazi > :first-child { margin-top:0; }
.yazi h2 { font-size:1.75rem; margin:2em 0 .6em; scroll-margin-top:90px; }
.yazi h2::before { content:"✦ "; color:var(--pink); }
.yazi h3 { font-size:1.28rem; margin:1.7em 0 .5em; scroll-margin-top:90px; }
.yazi p { margin:0 0 1.2em; }
.yazi ul, .yazi ol { padding-left:1.3em; margin:0 0 1.3em; }
.yazi li { margin:.4em 0; }
.yazi li::marker { color:var(--pri); font-weight:1000; }
.yazi code { background:var(--lila); padding:2px 7px; border-radius:7px; font-size:.92em; }
.yazi strong { background:linear-gradient(transparent 62%, color-mix(in srgb, var(--sari) 70%, transparent) 62%); }
.yazi .ipucu { position:relative; background:#FFF1A8; color:#3D3420; padding:32px 24px 20px; margin:1.8em 0; rotate:-.8deg;
  border-radius:2px 2px 18px 2px; box-shadow:0 10px 20px rgba(120,90,0,.14); font-size:1.08rem; }
.yazi .ipucu::before { content:"İpucu!"; position:absolute; top:-4px; left:18px; font-family:"Caveat", cursive; font-weight:700; font-size:1.7rem;
  color:#B45309; rotate:-4deg; }
.yazi[lang="en"] .ipucu::before { content:"Tip!"; }
.yazi .ipucu a { color:#92400E; }
.yazi .ipucu strong { background:none; }
.tablo-kap { overflow-x:auto; margin:0 0 1.6em; border:2px solid var(--line); border-radius:20px; box-shadow:var(--golge); }
.yazi table { border-collapse:collapse; width:100%; font-size:1rem; background:var(--card); }
.yazi th, .yazi td { text-align:left; padding:12px 16px; border-bottom:1.5px solid var(--line); }
.yazi th { background:var(--gecis); color:#fff; font-weight:1000; border-bottom:0; }
.yazi tr:last-child td { border-bottom:0; }

.yan { position:sticky; top:94px; display:grid; gap:34px; }
.notkagidi { position:relative; background:#FFF1A8; color:#3D3420; padding:26px 20px 18px; rotate:1.5deg; box-shadow:0 10px 20px rgba(120,90,0,.14); border-radius:2px 2px 16px 2px; }
.notkagidi .bant { width:80px; }
.notkagidi b { display:block; font-family:"Caveat", cursive; font-size:1.75rem; line-height:1; margin-bottom:8px; color:#B45309; }
.notkagidi a { display:block; color:#3D3420; text-decoration:none; font-weight:800; font-size:.93rem; padding:7px 0; line-height:1.35; border-bottom:1px dashed rgba(61,52,32,.2); }
.notkagidi a:last-child { border-bottom:0; }
.notkagidi a:hover { color:#B45309; }
.yan-cta { position:relative; text-align:center; padding:26px 18px 22px; background:var(--gecis); color:#fff; border:7px solid #fff; border-radius:30px;
  rotate:-2deg; box-shadow:0 0 0 1.5px var(--line), var(--golge); }
.yan-cta .sticker { font-size:50px; position:absolute; top:-30px; right:-10px; rotate:12deg; }
.yan-cta p { margin:0 0 14px; font-weight:900; font-size:1.15rem; line-height:1.3; }
.yan-cta .indir { min-height:52px; padding:8px 16px 8px 14px; box-shadow:4px 4px 0 rgba(15,11,24,.35); }

.yazi-cta { position:relative; display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:center; margin:2.6em 0 0; padding:30px;
  background:var(--gecis); color:#fff; border:8px solid #fff; border-radius:34px; rotate:-1deg; box-shadow:0 0 0 1.5px var(--line), var(--golge-buyuk); }
.yazi-cta > .sticker { font-size:72px; grid-row:span 3; }
.yazi-cta h2 { font-size:1.55rem; margin:0; color:#fff; } .yazi-cta h2::before { content:none; }
.yazi-cta p { margin:0 0 10px; color:rgba(255,255,255,.95); font-size:1.02rem; line-height:1.5; }
.yazi-cta .indir { justify-self:start; box-shadow:4px 4px 0 rgba(15,11,24,.35); }

/* ---------- Alt bilgi: sticker tabakasi kenari ---------- */
footer.alt { position:relative; margin-top:110px; background:var(--card); color:var(--ink); padding:60px 0 26px; border-top:1.5px solid var(--line); }
footer.alt::before { content:""; position:absolute; left:0; right:0; top:-19px; height:20px;
  background:radial-gradient(circle at 12px 20px, var(--card) 12px, transparent 12.5px) 0 0/24px 20px repeat-x;
  filter:drop-shadow(0 -1.5px 0 var(--line)); }
.alt-ic { display:grid; grid-template-columns:1.2fr 2fr; gap:40px; }
footer.alt .marka { color:var(--ink); }
.alt-marka p { color:var(--soft); margin:12px 0 0; max-width:22em; }
.alt-marka .el { display:block; font-size:1.6rem; color:var(--pink); margin-top:14px; rotate:-2deg; }
footer.alt nav { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
footer.alt nav b { display:block; font-weight:1000; margin-bottom:6px; }
footer.alt nav a { display:block; color:var(--soft); text-decoration:none; padding:7px 0; font-weight:700; }
footer.alt nav a:hover { color:var(--pri); }
.alt-not { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--soft); font-size:.86rem; }

/* Kaydirinca belirme (JS .gor ekler; JS yoksa hep gorunur) */
.js .belir { opacity:0; translate:0 26px; transition:opacity .6s ease, translate .6s ease; }
.js .belir.gor { opacity:1; translate:0 0; }

/* ---------- Duyarli ---------- */
@media (max-width:980px) {
  .hero-ic, .oncesonra, .sohbet-bolum { grid-template-columns:1fr; gap:80px; }
  .hero { padding-top:36px; }
  .yapistir { grid-template-columns:1fr 1fr; gap:50px 20px; }
  .oz:nth-child(n) { grid-column:span 1; }
  .oz:nth-child(6) { grid-column:span 2; }
  .polaroidler { grid-template-columns:repeat(2,1fr); }
  .yazi-duzen { grid-template-columns:1fr; }
  .yan { position:static; order:-1; }
  .yan-cta { display:none; }
  .menu .genis { display:none; }
}
@media (max-width:640px) {
  body { font-size:16px; background-size:28px 28px; }
  section.blok { padding:70px 0; }
  .yapistir, .polaroidler, .roman { grid-template-columns:1fr; }
  .oz:nth-child(6) { grid-column:span 1; }
  .roman { gap:30px; } .kare:nth-child(2) { translate:none; }
  .polaroidler > :nth-child(3n+2) .polaroid { translate:none; }
  .boya { width:calc(50% - 12px); }
  .tabaka-not { left:0; }
  .ust-sag .buton { display:none; }
  .marka span { display:none; }
  .alt-ic { grid-template-columns:1fr; }
  footer.alt nav { grid-template-columns:1fr 1fr; }
  .yazi-cta { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .yazi-cta > .sticker { grid-row:auto; } .yazi-cta .indir { justify-self:center; }
  .kagit { padding-top:44px; }
  .dev { padding:56px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .belir, .js .sohbet .mesaj { opacity:1; translate:none; scale:1; }
}