/* ============================================================
   ÖZGÜRLÜK HESABI — TASARIM TOKENLARI
   ============================================================ */
:root{
  --kagit:      #EBEDE3;   /* soluk zeytin kağıt */
  --kagit-ust:  #F7F8F2;   /* kart yüzeyi */
  --murekkep:   #16232B;   /* ana metin */
  --silik:      #5E6E6A;   /* ikincil metin */
  --calis:      #8D9C96;   /* çalışma yılları — donuk */
  --ozgur:      #0F7D5C;   /* özgür yıllar — canlı */
  --altin:      #C08A1E;   /* işaret / vurgu */
  --cizgi:      #CFD5C6;

  --dis:        clamp(16px, 4vw, 28px);
  --yuvarlak:   3px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--kagit);
  color:var(--murekkep);
  font-family:"Karla", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.sarmal{max-width:760px;margin:0 auto;padding:0 var(--dis) 80px;}

/* ============================================================
   SONUÇ YERLEŞİMİ
   Sorun: öneri satırı ve katalog kartların altında kalıyordu; ilk gelen
   kullanıcı oraya hiç inmeyip sitenin oynanan kısmını kaçırıyordu.

   Dar ekranda kenar boşluğu YOKTUR, o yüzden çözüm sıralamadır:
   interaktif bölümler bilgi kartlarının ÜSTÜNE alınır (CSS `order`).
   Geniş ekranda ise sayfa kenarlara taşar ve üçü yan yana durur —
   öneri solda, rakam ortada, katalog sağda; hepsi tek ekranda.
   ============================================================ */
/* Dar ekran: tek sütun. Sıra — rakam ve şerit önce (sitenin cevabı o),
   hemen ardından OYNANAN bölümler, bilgi kartları en sona. Kartları aşağı
   almak öneri ve kataloğu ~390 piksel yukarı çekiyor. */
.sonuc-izgara{display:grid;gap:26px;}
.sutun-orta{order:1;min-width:0;}
.sonuc-izgara > .oneri{order:2;}
.sonuc-izgara > .katalog{order:3;}
.sonuc-izgara > .kartlar{order:4;margin-top:0;}

@media(min-width:1180px){
  /* Yalnızca sonuç aşamasında genişle; form ve açılış 760px'de kalır. */
  .sarmal:has(.sonuc:not(.gizli)){max-width:1240px;}
  .sonuc-izgara{
    grid-template-columns:270px minmax(0,1fr) 300px;
    align-items:start;gap:30px 30px;
  }
  /* Geniş ekranda sıra değil, yerleşim: kartlar ortanın altına iner. */
  .sonuc-izgara > .oneri  {grid-column:1;grid-row:1;position:sticky;top:20px;}
  .sutun-orta             {grid-column:2;grid-row:1;}
  .sonuc-izgara > .kartlar{grid-column:2;grid-row:2;}
  .sonuc-izgara > .katalog{grid-column:3;grid-row:1;position:sticky;top:20px;}
  /* Yan sütunlarda üst çizgi gereksiz — zaten ayrı sütunlar */
  .sonuc-izgara > .oneri,
  .sonuc-izgara > .katalog{margin-top:0;border-top:0;padding-top:0;}
  /* Dar sütunda katalog tek sıraya iner. Seçici .sonuc-izgara ile
     güçlendirildi: 620px'lik iki sütun kuralı dosyada daha sonra geliyor. */
  .sonuc-izgara .katalog-raf{grid-template-columns:1fr;}
  /* Ortadaki blok kenarlara yapışmasın */
  .paylas{max-width:760px;margin-left:auto;margin-right:auto;}
  #cember{max-width:520px;}
}

/* Kaydırma ipucu — sadece dar ekranda, sadece sonuç aşamasında.
   Geniş ekranda öneri ve katalog yan sütunlarda zaten görünüyor, "aşağıda"
   demek yalan olurdu; o yüzden kural 1180'in ALTINDA yazılır, üstte
   bastırılmaz. Böylece :has() seçicileriyle özgüllük yarışına girilmiyor.

   SABİT konumlu, akış içinde değil: akışta olsaydı ekranın 812px'lik
   yüksekliğine karşı 896px'e düşüyordu — yani ipucunun kendisi de katlanmanın
   altında kalıp tam işe yarayacağı anda görünmüyordu.

   Görünürlük POZİTİF kapılı: aşağıda gerçekten bir şey yoksa (öneri de
   katalog da gizliyse) hiç çizilmez. İki bölüm de DOM'da kalıp `.gizli` ile
   gizlendiği için bu koşul güvenilir. */
.kaydir-ipucu{display:none;}
@media(max-width:1179.98px){
  .sonuc-izgara:has(> .oneri:not(.gizli)) .kaydir-ipucu,
  .sonuc-izgara:has(> .katalog:not(.gizli)) .kaydir-ipucu{
    display:flex;align-items:center;justify-content:center;gap:7px;
    position:fixed;z-index:5;
    /* left:50% + translateX DEĞİL: o zaman kutunun sığabileceği alan ekranın
       yalnızca sağ yarısı kalıyor ve tek satırlık yazı ikiye bölünüyordu.
       left:0/right:0 + margin:auto hem ortalar hem tam genişliği verir. */
    left:0;right:0;margin:0 auto;
    width:fit-content;max-width:calc(100% - 2 * var(--dis));
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    padding:8px 14px;
    background:var(--kagit-ust);
    border:1px solid var(--cizgi);border-radius:999px;
    box-shadow:0 2px 10px rgba(22,35,43,.13);
    font-size:13px;line-height:1.3;text-align:center;color:var(--silik);
    /* Tıklamayı çalmasın: altındaki şerit ve düğmeler erişilebilir kalsın. */
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  /* Kullanıcı kaydırdı, mesaj iletildi — bir daha gelmez. */
  .sonuc-izgara .kaydir-ipucu.gitti{
    opacity:0;transform:translateY(6px);
  }
}
.kaydir-ipucu svg{
  flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  animation:kaydirZipla 2.4s ease-in-out infinite;
}
@keyframes kaydirZipla{
  0%,55%,100%{transform:translateY(0);}
  28%        {transform:translateY(3px);}
}
@media (prefers-reduced-motion: reduce){
  .kaydir-ipucu svg{animation:none;}
  .kaydir-ipucu{transition:none;}
}

/* ---------- Başlık ---------- */
.ust{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:26px 0 18px;
}
/* İsim uzun ("Özgür Olmak İçin Ne Kadar Lazım?"), o yüzden başlıktaki punto
   ve harf aralığı dar tutuldu; .ust zaten flex-wrap olduğu için dar ekranda
   düğmeler alt satıra iniyor. */
/* Başlıktaki marka bir <a>: çıplak adrese gider, yani sıfırlar. Link gibi
   görünmemesi bilinçli — altı çizili mavi bir başlık istemiyoruz, ama
   üstüne gelince altın rengine dönerek tıklanabilir olduğunu söylüyor.
   Açılış ekranındaki .marka hâlâ düz metin; orada sıfırlanacak bir şey yok. */
.marka{
  font-family:"Archivo", sans-serif;font-weight:800;
  font-size:12.5px;letter-spacing:.10em;text-transform:uppercase;line-height:1.25;
}
a.marka{color:inherit;text-decoration:none;width:max-content;transition:color .15s;}
a.marka:hover{color:var(--altin);}
.marka span{color:var(--altin);}
.marka-blok{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cati{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silik);text-decoration:none;
  transition:color .15s;width:max-content;
}
.cati:hover{color:var(--altin);}
.parabirim{display:flex;gap:0;border:1px solid var(--murekkep);border-radius:var(--yuvarlak);overflow:hidden;}
.parabirim button{
  font-family:"IBM Plex Mono", monospace;font-size:13px;font-weight:600;
  background:transparent;color:var(--murekkep);border:0;padding:5px 12px;cursor:pointer;
}
.parabirim button[aria-pressed="true"]{background:var(--murekkep);color:var(--kagit);}
.ust-dugmeler{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* ---------- Mod sekmeleri ---------- */
.modlar{display:flex;gap:8px;margin-bottom:24px;}
.modlar button{
  flex:1;font-family:"Archivo", sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.04em;padding:11px 8px;cursor:pointer;
  background:transparent;color:var(--silik);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  transition:background .18s, color .18s, border-color .18s;
}
.modlar button[aria-pressed="true"]{
  background:var(--murekkep);color:var(--kagit);border-color:var(--murekkep);
}

/* ---------- Sonuç ---------- */
.sonuc{margin-bottom:34px;}
/* Ekranda değil, sadece ekran okuyucuda */
.ekran-okuyucu{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.etiket{
  font-family:"Archivo", sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silik);margin:0 0 6px;
}
.rakam{
  font-family:"Archivo", sans-serif;font-weight:800;
  font-size:clamp(38px, 11vw, 76px);line-height:.95;letter-spacing:-.03em;
  margin:0;
}
.rakam small{font-size:.42em;letter-spacing:-.01em;font-weight:600;}
.altcizgi{height:4px;background:var(--altin);width:64px;margin:14px 0 12px;}
.ozet{margin:0;color:var(--silik);font-size:15px;max-width:52ch;}

/* ---------- Ömür şeridi (imza öğe) ---------- */
.serit-kutu{margin:26px 0 6px;}
.serit{display:flex;gap:2px;align-items:stretch;height:34px;}
.yil{
  flex:1 1 0;min-width:0;border-radius:1px;
  background:var(--calis);
  transition:background-color .35s ease;
}
.yil.ozgur{background:var(--ozgur);}
.yil.kapi{background:var(--altin);}
.serit-etiket{
  display:flex;justify-content:space-between;
  font-family:"IBM Plex Mono", monospace;font-size:11px;color:var(--silik);
  margin-top:8px;
}
.lejant{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--silik);margin-top:10px;}
.lejant i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:baseline;}
.lej-calis{background:var(--calis);}
.lej-ozgur{background:var(--ozgur);}
.lej-kapi{background:var(--altin);}

/* ---------- Kartlar ---------- */
.kartlar{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px;}
@media(min-width:620px){.kartlar{grid-template-columns:repeat(3,1fr);}}
.kart{
  background:var(--kagit-ust);border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak);padding:14px 15px;
}
.kart .baslik{
  font-family:"Archivo",sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--silik);margin-bottom:7px;
}
.kart .deger{
  font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;line-height:1.15;
}
.kart .not{font-size:12.5px;color:var(--silik);margin-top:4px;}

/* ---------- Form ---------- */
.form{margin-top:38px;}
.gizli{display:none;}
.grup{border-top:1px solid var(--cizgi);padding:20px 0 4px;}
.grup:first-child{border-top:0;}
.soru{margin-bottom:20px;}
.soru:last-child{margin-bottom:6px;}
.soru > label, .soru > .sorubaslik{
  display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:.01em;margin-bottom:9px;
}
.ipucu{font-weight:400;color:var(--silik);font-size:12.5px;font-family:"Karla",sans-serif;}

.secenekler{display:flex;flex-wrap:wrap;gap:7px;}
.secenekler button{
  font-family:"Karla",sans-serif;font-size:13.5px;
  background:var(--kagit-ust);color:var(--murekkep);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:8px 13px;cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.secenekler button:hover{border-color:var(--murekkep);}
.secenekler button[aria-pressed="true"]{
  background:var(--murekkep);color:var(--kagit);border-color:var(--murekkep);
}

/* Kaydıraçlar HER genişlikte alt alta. Yan yana üç kaydıraç masaüstünde
   ~230px ediyordu; 18-100 aralığı için yıl başına 2,8 piksel demek bu, tek
   pikselde üç yıl kayıyor. Tam boyda 8,5 piksele çıkıyor. */
.kaydiraclar{display:grid;gap:24px;}
.kaydirac .ust-satir{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:2px;
}
.kaydirac .ad{font-family:"Archivo",sans-serif;font-weight:600;font-size:14px;}
.kaydirac .val{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(26px,7vw,34px);line-height:1;letter-spacing:-.03em;
  color:var(--altin);
}
.olcek{
  display:flex;justify-content:space-between;margin-top:-1px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--silik);opacity:.7;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--cizgi);border-radius:3px;}
input[type=range]::-moz-range-track{height:5px;background:var(--cizgi);border-radius:3px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--murekkep);margin-top:-10.5px;border:0;
}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--murekkep);border:0;}
input[type=range]:hover::-webkit-slider-thumb{background:var(--altin);}
input[type=range]:hover::-moz-range-thumb{background:var(--altin);}

.sayilar{display:grid;gap:14px;}
@media(min-width:620px){.sayilar{grid-template-columns:1fr 1fr;}}
.sayi-kutu{position:relative;}
.sayi input{
  width:100%;font-family:"IBM Plex Mono",monospace;font-size:16px;
  padding:10px 36px 10px 12px;background:var(--kagit-ust);color:var(--murekkep);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
}
.sayi input:focus{outline:2px solid var(--altin);outline-offset:1px;border-color:var(--murekkep);}
.para-simge{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;
  color:var(--silik);pointer-events:none;
}

/* ---------- Döküm ---------- */
.dokum{margin-top:38px;border-top:1px solid var(--cizgi);padding-top:20px;}
.dokum h2{
  font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silik);margin:0 0 14px;
}
.satir{margin-bottom:11px;}
.satir .ust-satir{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:4px;gap:12px;}
.satir .tutar{font-family:"IBM Plex Mono",monospace;font-size:13px;white-space:nowrap;}
.cubuk{height:6px;background:var(--cizgi);border-radius:1px;overflow:hidden;}
.cubuk i{display:block;height:100%;background:var(--ozgur);transition:width .3s ease;}
/* ömür boyu sürmeyen kalemler (çocuk gibi) çizgili görünür */
.cubuk i.sureli{
  background:repeating-linear-gradient(
    -45deg, var(--ozgur) 0 6px, rgba(15,125,92,.45) 6px 12px);
}

/* ---------- Öneri satırı ---------- */
.oneri{margin-top:30px;border-top:1px solid var(--cizgi);padding-top:18px;}
.oneri h2{
  font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silik);margin:0 0 12px;
}
.oneri-liste{list-style:none;margin:0;padding:0;}
.oneri-liste li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--cizgi);
}
.oneri-liste li:last-child{border-bottom:0;}
.oneri-metin{
  font-family:"Archivo",sans-serif;font-weight:600;
  font-size:clamp(15px,3.6vw,17px);line-height:1.3;
}
.oneri-metin::first-letter{text-transform:uppercase;}
.oneri-kazanc{
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--ozgur);white-space:nowrap;
}

/* ---------- Katalog ("şimdi bunu mahvedelim") ---------- */
.katalog{margin-top:32px;border-top:1px solid var(--cizgi);padding-top:20px;}
.katalog h2{
  font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silik);margin:0 0 6px;
}
.katalog-giris{margin:0 0 14px;font-size:13.5px;color:var(--silik);max-width:48ch;}
.katalog-raf{display:grid;grid-template-columns:1fr;gap:8px;}
@media(min-width:620px){.katalog-raf{grid-template-columns:1fr 1fr;}}

.katalog-kalem{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:2px 12px;text-align:left;
  background:var(--kagit-ust);color:var(--murekkep);
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:11px 13px;cursor:pointer;font-family:"Karla",sans-serif;
  transition:background .15s, border-color .15s, color .15s;
}
.katalog-kalem:hover{border-color:var(--murekkep);}
.katalog-kalem[aria-pressed="true"]{
  background:var(--murekkep);color:var(--kagit);border-color:var(--murekkep);
}
.katalog-ad{font-family:"Archivo",sans-serif;font-weight:600;font-size:14px;}
.katalog-not-kucuk{
  grid-column:1;font-size:12px;color:var(--silik);line-height:1.3;
}
.katalog-kalem[aria-pressed="true"] .katalog-not-kucuk{color:rgba(235,237,227,.6);}

.katalog-rozet{
  grid-column:2;grid-row:1 / span 2;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  white-space:nowrap;color:var(--silik);
}
.katalog-rozet.kotu{color:var(--altin);}
.katalog-rozet.iyi{color:var(--ozgur);}
.katalog-rozet.notr{color:var(--silik);opacity:.7;font-weight:400;}
.katalog-kalem[aria-pressed="true"] .katalog-rozet.iyi{color:#5FD3AC;}
.katalog-kalem[aria-pressed="true"] .katalog-rozet.notr{color:rgba(235,237,227,.6);}

/* ============================================================
   GÖRSEL TEMA
   Aynı HTML, aynı JS — sadece bu blok. Simgeler her iki temada da DOM'da
   duruyor, sade temada gizleniyor. Simgesi olmayan seçenek kendiliğinden
   metin düğmesi olarak kalır, bozulmaz.
   ============================================================ */
.simge{display:none;}

[data-tema="gorsel"] .secenekler{
  display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
}
[data-tema="gorsel"] .secenekler button.simgeli{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 8px 9px;text-align:center;line-height:1.25;
  background:var(--kagit-ust);color:var(--murekkep);border-color:var(--cizgi);
}
[data-tema="gorsel"] .simge{
  display:block;width:100%;height:auto;aspect-ratio:4/3;
  /* imza hareket: gri dururken renklenmek */
  filter:grayscale(1) contrast(.85);
  opacity:.5;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
[data-tema="gorsel"] .secenekler button.simgeli:hover .simge,
[data-tema="gorsel"] .secenekler button.simgeli:focus-visible .simge{
  filter:none;opacity:1;transform:translateY(-2px);
}
/* Seçili kutu koyu dolgu YAPMAZ — dolgu illüstrasyonu yutuyor.
   Ayrım: tam renk + kalın mürekkep çerçeve + altın taban çizgisi. */
[data-tema="gorsel"] .secenekler button.simgeli[aria-pressed="true"]{
  background:var(--kagit-ust);color:var(--murekkep);
  border-color:var(--murekkep);box-shadow:inset 0 -3px 0 var(--altin);
  font-weight:600;
}
[data-tema="gorsel"] .secenekler button.simgeli[aria-pressed="true"] .simge{
  filter:none;opacity:1;
}

/* Katalog rafı: aynı gri→renk dili, kendi yerleşimini koruyarak */
[data-tema="gorsel"] .katalog-kalem{grid-template-columns:44px 1fr auto;}
[data-tema="gorsel"] .katalog-kalem .simge{
  display:block;grid-column:1;grid-row:1 / span 2;width:44px;height:33px;
}
[data-tema="gorsel"] .katalog-kalem .katalog-ad,
[data-tema="gorsel"] .katalog-kalem .katalog-not-kucuk{grid-column:2;}
[data-tema="gorsel"] .katalog-kalem .katalog-rozet{grid-column:3;}
[data-tema="gorsel"] .katalog-kalem[aria-pressed="true"]{
  background:var(--kagit-ust);color:var(--murekkep);
  border-color:var(--murekkep);box-shadow:inset 0 -3px 0 var(--altin);
}
[data-tema="gorsel"] .katalog-kalem[aria-pressed="true"] .katalog-not-kucuk{color:var(--silik);}
[data-tema="gorsel"] .katalog-kalem[aria-pressed="true"] .katalog-rozet.iyi{color:var(--ozgur);}
[data-tema="gorsel"] .katalog-kalem[aria-pressed="true"] .katalog-rozet.notr{color:var(--silik);}

@media (prefers-reduced-motion: reduce){
  [data-tema="gorsel"] .simge{transition:none;}
  [data-tema="gorsel"] .secenekler button.simgeli:hover .simge{transform:none;}
}
/* Dokunmatikte hover yok: gri kalmasın, hepsi renkli gelsin */
@media (hover: none){
  [data-tema="gorsel"] .simge{filter:none;opacity:.85;}
  [data-tema="gorsel"] .secenekler button.simgeli[aria-pressed="true"] .simge{opacity:1;}
}

/* ---------- Açılış ekranı ---------- */
body.kilit{overflow:hidden;}
.acilis{
  position:fixed;inset:0;z-index:40;background:var(--kagit);
  display:flex;align-items:center;justify-content:center;
  padding:var(--dis);overflow-y:auto;
}
.acilis.kapali{display:none;}
.acilis-ic{max-width:520px;width:100%;}
.acilis h1{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(29px,8.4vw,52px);line-height:1.02;letter-spacing:-.03em;
  margin:12px 0 14px;
}
.acilis .giris{margin:0;color:var(--silik);font-size:15.5px;max-width:44ch;}
.acilis .serit{margin-top:26px;}
.acilis ul{list-style:none;padding:0;margin:20px 0 26px;}
.acilis li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;color:var(--silik);margin-bottom:9px;
}
.acilis li i{width:10px;height:10px;margin-top:6px;flex:0 0 auto;}
.acilis-dugmeler{display:flex;gap:9px;flex-wrap:wrap;}
.acilis-dugmeler button{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:var(--yuvarlak);cursor:pointer;
  border:1px solid var(--murekkep);transition:background .15s, color .15s;
}
.birincil{background:var(--murekkep);color:var(--kagit);}
.ikincil{background:transparent;color:var(--murekkep);}
.ikincil:hover{background:var(--murekkep);color:var(--kagit);}
.acilis-not{font-size:12px;color:var(--silik);margin-top:18px;}

.asama-not{font-size:13.5px;color:var(--silik);margin:-10px 0 24px;max-width:46ch;}
.mini-dugme{
  flex:1;background:var(--altin);color:var(--murekkep);border:0;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;
  padding:12px;border-radius:var(--yuvarlak);cursor:pointer;
}
.mini-dugme:hover{filter:brightness(1.08);}

/* ---------- Paylaşım kartı ---------- */
.paylas{
  margin-top:24px;background:var(--murekkep);color:var(--kagit);
  border-radius:var(--yuvarlak);padding:18px 18px 15px;
}
.paylas-metin{
  margin:0 0 14px;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:clamp(15px,4.2vw,19px);line-height:1.38;
}
.paylas-metin b{color:var(--altin);font-weight:600;}
.paylas-dugmeler{display:flex;gap:8px;flex-wrap:wrap;}
.paylas-dugmeler button,.paylas-dugmeler a{
  font-family:"Karla",sans-serif;font-size:13px;text-decoration:none;line-height:1.2;
  background:transparent;color:var(--kagit);
  border:1px solid rgba(235,237,227,.35);border-radius:var(--yuvarlak);
  padding:8px 13px;cursor:pointer;transition:background .15s, color .15s;
}
.paylas-dugmeler button:hover,.paylas-dugmeler a:hover{background:var(--kagit);color:var(--murekkep);}
/* "Metni kopyala" en sağa itilir; "Sonucumu paylaş" birincil eylem olarak solda. */
#metinKopyala{margin-left:auto;}
.paylas-not{font-size:11.5px;opacity:.55;margin:11px 0 0;}

/* ---------- Baştan başla ----------
   Sonuç ekranının en altındaydı; oraya inen zaten azdı, inen de aramıyordu.
   Artık başlıkta, para biriminin yanında. Çerçeveli ama soluk: aynı hizadaki
   ₺/$ seçicisiyle boy ve dil olarak eşleşiyor, ondan daha bağıramaz. */
.yeniden{
  font-family:"IBM Plex Mono", monospace;font-size:11px;letter-spacing:.05em;
  background:transparent;color:var(--silik);cursor:pointer;
  /* 6px dikey: ₺/$ seçicisi 13px yazıyla 29px'e çıkıyor, bu 11px yazıyla
     aynı boya ancak böyle geliyor. Yan yana durdukları için önemli. */
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:6px 10px;
  transition:color .15s, border-color .15s;
}
.yeniden:hover{color:var(--murekkep);border-color:var(--murekkep);}

/* ---------- Sticky mini bar ---------- */
.mini{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--murekkep);color:var(--kagit);
  transform:translateY(110%);transition:transform .25s ease;
}
.mini.gorunur{transform:translateY(0);}
.mini .ic{
  max-width:760px;margin:0 auto;padding:11px var(--dis);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.mini .sol{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-family:"Archivo",sans-serif;opacity:.7;}
.mini .sag{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;}

footer{margin-top:44px;border-top:1px solid var(--cizgi);padding-top:16px;font-size:12.5px;color:var(--silik);}
footer p{margin:0 0 8px;max-width:60ch;}
.kunye{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--cizgi);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;
}
.kunye a{color:var(--murekkep);text-decoration:none;font-weight:600;transition:color .15s;}
.kunye a:hover{color:var(--altin);}
.kunye .ayrac{opacity:.45;}
.kunye .surum{opacity:.6;}

/* ---------- Gizlilik / Kullanım Koşulları sayfası ---------- */
.metin{max-width:680px;}
.metin .geri{
  font-family:"Karla",sans-serif;font-size:13px;color:var(--silik);
  text-decoration:none;border-bottom:1px solid var(--cizgi);padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.metin .geri:hover{color:var(--murekkep);border-color:var(--murekkep);}
.metin h1{
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:clamp(26px,6vw,38px);line-height:1.1;letter-spacing:-.02em;margin:20px 0 12px;
}
.metin .giris-metin{color:var(--silik);font-size:15px;max-width:56ch;margin:0 0 22px;}
.metin-menu{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px;padding-bottom:18px;border-bottom:1px solid var(--cizgi);}
.metin-menu a{
  font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--silik);text-decoration:none;
}
.metin-menu a:hover{color:var(--altin);}
.metin section{padding-top:26px;}
.metin h2{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.01em;margin:0 0 4px;
}
.metin h3{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.02em;margin:24px 0 6px;
}
.metin p,.metin li{font-size:14.5px;line-height:1.65;color:var(--murekkep);max-width:62ch;}
.metin p{margin:0 0 10px;}
.metin ul{margin:0 0 10px;padding-left:20px;}
.metin li{margin-bottom:6px;}
.metin code{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  background:var(--kagit-ust);border:1px solid var(--cizgi);
  border-radius:2px;padding:1px 5px;
}
.metin a{color:var(--murekkep);}
.metin footer{margin-top:40px;}

:focus-visible{outline:2px solid var(--altin);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}