/* ==========================================================
   BENİM SİTEM — "Kartoteks" tasarım sistemi
   ----------------------------------------------------------
   Fikir: bir kartoteks/panoya iğnelenmiş fişler. Her kategori
   kendi renginde bir klasör sekmesi; her yazı panoya iğnelenmiş,
   hafifçe eğik duran bir fiş/kart. Üzerine gelince kart doğrulur.
   ========================================================== */

* { box-sizing: border-box; }

/* ==========================================================
   EKRANA SIĞDIRMA — yatay taşmaya karşı genel koruma
   ----------------------------------------------------------
   Mobilde sayfanın yana kaymasının üç ayrı sebebi vardı:
     1. Kartlar hafifçe eğik duruyor (transform: rotate). Dönen bir
        kutunun köşeleri kendi kutusunun dışına çıkar ve dar ekranda
        bu taşma sağa doğru kaydırılabilir bir alan yaratır.
     2. Sayfa geçiş animasyonu içeriği 32px yana kaydırıyor; kaydığı
        anda o 32px de kaydırılabilir alana ekleniyordu.
     3. Uzun bağlantılar, kod blokları ve tablolar satır sonu
        bulamayıp kutularının dışına taşıyordu.
   Aşağıdaki üç kural bunların hepsini kaynağında kesiyor; ayrıca
   ölçüler dar ekranda yeniden ayarlanıyor (en alttaki MOBİL bölümü).
   ========================================================== */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  /* "clip" bilerek seçildi: "hidden" gövdeyi bir kaydırma kabına
     çevirip içindeki position:sticky öğeleri (yönetici panelinin yan
     menüsü) bozuyor. Eski tarayıcılar "clip"i tanımazsa üstteki
     "hidden" geçerli kalır. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Uzun bir adres ya da kesintisiz uzun bir kelime kutusunu
     genişletmesin — gerekirse ortasından bölünsün. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Geçiş animasyonunun yana kaydırdığı içerik dışarı sızmasın. */
#viewport {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Genişliği kestirilemeyen öğeler kutularını aşmasın. */
img, svg, video, canvas, iframe, table, pre {
  max-width: 100%;
}

:root {
  /* ---- Nötr tonlar (açık tema) ---- */
  --zemin:        #F3EFFB;
  --panel:        #FFFFFF;
  --panel-alt:    #FBF8FF;
  --ink:          #201C2E;
  --ink-soft:     rgba(32, 28, 46, 0.64);
  --ink-daha-soft: rgba(32, 28, 46, 0.42);
  --cizgi:        #201C2E;

  /* ---- Kartoteks sekme renkleri (6 canlı ton + üzerlerinde okunan metin rengi) ---- */
  --pembe:        #FF3E7F;  --pembe-metin:   #FFFFFF;
  --turuncu:      #FF7A2F;  --turuncu-metin: #FFFFFF;
  --sari:         #FFC53D;  --sari-metin:    #241C05;
  --yesil:        #1FAE72;  --yesil-metin:   #FFFFFF;
  --mavi:         #2E7DFF;  --mavi-metin:    #FFFFFF;
  --mor:          #9B4DFF;  --mor-metin:     #FFFFFF;

  /* Defter yapraklarına özel 3 renk daha — böylece 9 renkli bir tur
     oluşuyor ve art arda eklenen yazıların yaprakları birbirine benzemiyor. */
  --teal:         #0FB5AE;  --teal-metin:     #04231F;
  --kirmizi:      #E8342F;  --kirmizi-metin:  #FFFFFF;
  --lacivert:     #2B3A9E;  --lacivert-metin: #FFFFFF;

  /* Çizgili defter kağıdı: iki satır çizgisi arasındaki mesafe.
     Yazı satır yüksekliği ve görsel yükseklikleri hep bunun katı olur,
     böylece her satır kendi çizgisinin üzerine oturur. */
  --kare:            26px;
  --kare-cizgi:      rgba(46, 125, 255, 0.20);

  --basari:  #1FAE72;
  --hata:    #FF3E5F;

  --font-baslik: 'Fredoka', system-ui, sans-serif;
  --font-govde:  'Inter', system-ui, -apple-system, sans-serif;

  --radius-kart: 16px;
  --radius-pil:  999px;
  --genislik:    1180px;
  --gecis-suresi: 480ms;
  /* Sayfa geçişinde içeriğin yana kayma mesafesi (mobilde küçülür). */
  --gecis-kaydirma: 32px;

  --golge-kart: 0 1px 2px rgba(32,28,46,0.07), 0 10px 24px -8px rgba(32,28,46,0.18);
  --golge-kart-hover: 0 4px 10px rgba(32,28,46,0.10), 0 20px 34px -10px rgba(32,28,46,0.26);
}

[data-tema="koyu"] {
  --zemin:        #1B1726;
  --panel:        #262034;
  --panel-alt:    #2E273D;
  --ink:          #F4F0FC;
  --ink-soft:     rgba(244, 240, 252, 0.68);
  --ink-daha-soft: rgba(244, 240, 252, 0.46);
  --cizgi:        #F4F0FC;

  --kare-cizgi:      rgba(244, 240, 252, 0.15);

  --golge-kart: 0 1px 2px rgba(0,0,0,0.35), 0 10px 26px -8px rgba(0,0,0,0.55);
  --golge-kart-hover: 0 4px 12px rgba(0,0,0,0.4), 0 22px 38px -10px rgba(0,0,0,0.6);
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--ink);
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

::selection { background: var(--sari); color: var(--sari-metin); }

:focus-visible {
  outline: 3px solid var(--mavi);
  outline-offset: 2px;
  border-radius: 4px;
}

.icerik {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 6 sekme renginin yardımcı sınıfları ---------- */
.tab-pembe   { --aksan: var(--pembe);   --aksan-metin: var(--pembe-metin); }
.tab-turuncu { --aksan: var(--turuncu); --aksan-metin: var(--turuncu-metin); }
.tab-sari    { --aksan: var(--sari);    --aksan-metin: var(--sari-metin); }
.tab-yesil   { --aksan: var(--yesil);   --aksan-metin: var(--yesil-metin); }
.tab-mavi    { --aksan: var(--mavi);    --aksan-metin: var(--mavi-metin); }
.tab-mor     { --aksan: var(--mor);     --aksan-metin: var(--mor-metin); }
.tab-teal    { --aksan: var(--teal);    --aksan-metin: var(--teal-metin); }
.tab-kirmizi { --aksan: var(--kirmizi); --aksan-metin: var(--kirmizi-metin); }
.tab-lacivert{ --aksan: var(--lacivert);--aksan-metin: var(--lacivert-metin); }

/* ==========================================================
   ÜST BAŞLIK
   ========================================================== */

.site-header {
  border-bottom: 3px solid var(--cizgi);
  background: var(--panel);
}
.site-header .icerik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.marka {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.marka-fis {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--mor);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transform: rotate(-8deg);
  box-shadow: 3px 3px 0 var(--cizgi);
  flex-shrink: 0;
}

.arama-formu {
  flex: 1 1 240px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-alt);
  border: 2px solid var(--cizgi);
  border-radius: var(--radius-pil);
  padding: 8px 8px 8px 16px;
}
.arama-formu input {
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-govde);
  font-size: 14px;
  flex: 1;
  min-width: 0;
  outline: none;
}
.arama-formu input::placeholder { color: var(--ink-daha-soft); }
.arama-formu button {
  border: none;
  background: var(--ink);
  color: var(--zemin);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 120ms ease;
}
.arama-formu button:hover { transform: scale(1.08); }

.ustbar-eylemler {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hesap-alani { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hesap-hosgeldin { opacity: 0.75; }
.hesap-hosgeldin strong { opacity: 1; }

.hesap-link {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border: 2px solid var(--cizgi);
  border-radius: var(--radius-pil);
  background: var(--panel-alt);
  transition: transform 120ms ease, background 120ms ease;
}
.hesap-link:hover { transform: translateY(-2px); }
.hesap-link-vurgu { background: var(--mor); color: #fff; border-color: var(--mor); }

.tema-dugmesi {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-alt);
  color: var(--ink);
  border: 2px solid var(--cizgi);
  border-radius: var(--radius-pil);
  padding: 9px 16px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 120ms ease;
}
.tema-dugmesi:hover { transform: translateY(-2px); }

/* ==========================================================
   KATEGORİ RAFI (klasör sekmeleri şeklinde gezinme)
   ========================================================== */

.kategori-raf {
  background: var(--panel-alt);
  border-bottom: 3px solid var(--cizgi);
}
.raf-satiri {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.raf-satiri::-webkit-scrollbar { height: 4px; }

/* Kategori sekmeleri — AÇILIR MENÜ YOK.
   Rafta yalnızca ANA BAŞLIKLAR görünür. Bir başlığa (örn. "TYT")
   tıklanınca o kategorinin sayfası açılır ve alt kategoriler orada
   kart olarak listelenir. Dokunmatik ekranda "menü açıldı mı, kapandı
   mı" belirsizliği tamamen ortadan kalkar. */

.raf-sekme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px 9px;
  margin-top: 8px;
  border: 2.5px solid var(--cizgi);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--aksan, var(--panel));
  color: var(--aksan-metin, var(--ink));
  white-space: nowrap;
  opacity: 0.84;
  transition: transform 150ms ease, opacity 150ms ease, padding 150ms ease;
}
.raf-sekme:hover {
  transform: translateY(-3px);
  opacity: 1;
}
.raf-sekme.aktif {
  opacity: 1;
  margin-top: 2px;
  padding: 14px 20px 11px;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.16);
}

/* Alt kategorisi olan başlıklarda kaç alt başlık olduğunu gösteren rozet. */
.sekme-alt-sayisi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pil);
  border: 1.5px solid currentColor;
  background: rgba(255, 255, 255, 0.28);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 600px) {
  .raf-sekme { font-size: 13px; padding: 9px 14px 8px; }
  .raf-sekme.aktif { padding: 12px 16px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .raf-sekme { transition: none !important; }
}

/* ==========================================================
   HERO — panoya iğnelenmiş büyük fiş + etrafında küçük notlar
   ========================================================== */

.hero {
  padding: 56px 0 44px;
}
.hero .icerik { position: relative; }

.hero-fis {
  position: relative;
  max-width: 640px;
  background: var(--panel);
  border: 3px solid var(--cizgi);
  border-radius: var(--radius-kart);
  padding: 34px 36px;
  box-shadow: var(--golge-kart);
  transform: rotate(-1.4deg);
}
.hero-fis::before {
  content: "";
  position: absolute;
  top: -11px; left: 40px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--pembe);
  border: 3px solid var(--panel);
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.hero-etiket {
  display: inline-block;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.hero-fis h1 {
  font-size: clamp(28px, 4.4vw, 42px);
  margin-bottom: 14px;
}
.hero-fis p {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 46ch;
}

.hero-yan-notlar {
  position: absolute;
  right: 24px;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 190px;
}
.hero-mini-not {
  background: var(--panel);
  border: 2.5px solid var(--cizgi);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--golge-kart);
}
.hero-mini-not:nth-child(1) { transform: rotate(3deg); }
.hero-mini-not:nth-child(2) { transform: rotate(-2.5deg); margin-left: 24px; }
.hero-mini-not .sayi {
  display: block;
  font-family: var(--font-baslik);
  font-size: 22px;
  font-weight: 700;
  color: var(--aksan, var(--mor));
}

@media (max-width: 880px) {
  .hero-yan-notlar { display: none; }
}

/* ==========================================================
   BÖLÜM BAŞLIĞI
   ========================================================== */

.bolum { padding: 8px 0 48px; }
.bolum-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.bolum-baslik h2 {
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bolum-baslik h2::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--mor);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.tum-link {
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tum-link:hover { color: var(--ink); }

/* ==========================================================
   KATEGORİ RAFI/IZGARA (bento — büyük + küçük fişler karışık)
   ========================================================== */

.kategori-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
.kategori-fis {
  grid-column: span 1;
  background: var(--panel);
  border: 2.5px solid var(--cizgi);
  border-radius: var(--radius-kart);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 148px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.kategori-fis:hover { transform: translateY(-4px); box-shadow: var(--golge-kart-hover); }
.kategori-fis:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; }

.kategori-fis .sekme-nokta {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--aksan);
  color: var(--aksan-metin);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 14px;
}
.kategori-fis h3 { font-size: 17px; margin-top: auto; }
.kategori-fis:nth-child(4n+1) h3 { font-size: 22px; }
.kategori-fis p {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kategori-fis .fis-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-daha-soft);
  font-weight: 600;
  margin-top: 4px;
}

@media (max-width: 880px) {
  .kategori-izgara { grid-template-columns: repeat(2, 1fr); }
  .kategori-fis:nth-child(4n+1) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 540px) {
  .kategori-izgara { grid-template-columns: 1fr; }
  .kategori-fis:nth-child(4n+1) { grid-column: span 1; }
}

/* ==========================================================
   YAZI/NOT KARTLARI — panoya iğnelenmiş, hafif eğik fişler
   ========================================================== */

.not-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 22px;
}
@media (max-width: 880px) { .not-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .not-izgara { grid-template-columns: 1fr; } }

.not-karti {
  position: relative;
  background: var(--panel);
  border: 2.5px solid var(--cizgi);
  border-radius: var(--radius-kart);
  padding: 22px 20px 18px;
  box-shadow: var(--golge-kart);
  transform: rotate(var(--donus, 0deg));
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.not-karti:hover { transform: rotate(0deg) translateY(-5px); box-shadow: var(--golge-kart-hover); }

.not-karti::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--aksan, var(--ink));
  border: 2.5px solid var(--panel);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.not-izgara .not-karti:nth-child(6n+1) { --donus: -1.6deg; }
.not-izgara .not-karti:nth-child(6n+2) { --donus: 1.1deg; }
.not-izgara .not-karti:nth-child(6n+3) { --donus: -0.7deg; }
.not-izgara .not-karti:nth-child(6n+4) { --donus: 1.8deg; }
.not-izgara .not-karti:nth-child(6n+5) { --donus: -1.1deg; }
.not-izgara .not-karti:nth-child(6n+6) { --donus: 0.6deg; }

.not-kategori {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--aksan, var(--ink-soft));
  margin-bottom: 10px;
}
.not-kategori::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.not-karti h3 { font-size: 17px; margin-bottom: 8px; }
.not-karti p { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }
.not-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-daha-soft);
  font-weight: 600;
  padding-top: 12px;
  border-top: 1.5px dashed var(--ink-daha-soft);
}
.not-alt .yorum-sayaci { display: inline-flex; align-items: center; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
  .not-karti, .kategori-fis { transition: none; }
}

/* ==========================================================
   İÇ YOL (breadcrumb) — bağlı sekme izi
   ========================================================== */

.ic-yol {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.ic-yol a:hover { color: var(--ink); text-decoration: underline; }
.ic-yol .ayrac { opacity: 0.4; }

/* ==========================================================
   KATEGORİ SAYFASI BAŞLIĞI
   ========================================================== */

.kategori-basligi {
  padding: 8px 0 36px;
}
.kategori-basligi h1 {
  font-size: clamp(26px, 4vw, 36px);
  display: inline;
  background: linear-gradient(to top, var(--aksan) 34%, transparent 34%);
  padding: 0 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Sadece doğrudan bölüm içindeki paragraflar. Alt seçici olmasaydı bu
   kural, aşağıdaki defter yaprağının içindeki paragraflara da sızar ve
   onlara 16px üst pay ekleyip satır çizgisi hizasını bozardı. */
.kategori-basligi > .icerik > p {
  margin-top: 16px;
  color: var(--ink-soft);
  max-width: 62ch;
}

.alt-kategori-pilleri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 40px;
}
.alt-kategori-pil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 2.5px solid var(--cizgi);
  border-radius: var(--radius-pil);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 13.5px;
  background: var(--panel);
  transition: transform 150ms ease, background 150ms ease;
}
.alt-kategori-pil:hover { transform: translateY(-2px); background: var(--aksan); color: var(--aksan-metin); }
.alt-kategori-pil .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--aksan); flex-shrink: 0; }
.alt-kategori-pil:hover .nokta { background: var(--aksan-metin); }

/* ==========================================================
   YAZI (POST) DETAY SAYFASI
   ========================================================== */

.yazi-govde { max-width: 720px; margin: 0 auto; padding: 36px 0 60px; }

.kategori-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pil);
  background: var(--aksan);
  color: var(--aksan-metin);
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: 18px;
}

.yazi-govde h1 { font-size: clamp(28px, 4.6vw, 40px); margin-bottom: 14px; }

.yazi-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 32px;
}

.yazi-icerik { font-size: 17px; line-height: 1.8; }
.yazi-icerik p { margin: 0 0 20px; }
.yazi-icerik h2 { font-size: 22px; margin: 36px 0 14px; }
.yazi-icerik h3 { font-size: 19px; margin: 28px 0 12px; }
.yazi-icerik ul, .yazi-icerik ol { padding-left: 22px; margin: 0 0 20px; }
.yazi-icerik li { margin-bottom: 8px; }
.yazi-icerik a { text-decoration: underline; text-decoration-color: var(--aksan, var(--mor)); text-underline-offset: 3px; }
.yazi-icerik blockquote {
  margin: 24px 0;
  padding: 4px 20px;
  border-left: 4px solid var(--aksan, var(--mor));
  color: var(--ink-soft);
  font-style: italic;
}
.yazi-icerik code {
  background: var(--panel-alt);
  border: 1.5px solid var(--cizgi);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.9em;
}
.yazi-icerik pre {
  background: var(--panel-alt);
  border: 2px solid var(--cizgi);
  border-radius: 10px;
  padding: 16px;
  overflow-x: auto;
}
.yazi-icerik img { border-radius: var(--radius-kart); border: 2.5px solid var(--cizgi); margin: 8px 0 20px; height: auto; }

/* Not: Eski "post-it panosu" (yazının altına mutlak konumla iğnelenen
   pano) kaldırıldı. Post-it'ler artık yazının akışına, tam konuldukları
   noktaya giriyor; stilleri aşağıdaki DEFTER YAPRAĞI bölümünde. */

.geri-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
}
.geri-link:hover { text-decoration: underline; }

/* Yırtık kağıt ayırıcı */
.yirtik-cizgi {
  height: 16px;
  margin: 44px 0 32px;
  background-color: var(--panel-alt);
  background-image:
    linear-gradient(135deg, var(--zemin) 25%, transparent 25%),
    linear-gradient(225deg, var(--zemin) 25%, transparent 25%);
  background-size: 16px 16px;
  background-position: 0 top;
  background-repeat: repeat-x;
  border-bottom: 2.5px solid var(--cizgi);
}

/* ==========================================================
   YORUMLAR
   ========================================================== */

.yorumlar-bolumu h2 { font-size: 19px; margin-bottom: 20px; }

.yorum-listesi { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }

.yorum-fisi {
  display: flex;
  gap: 14px;
  background: var(--panel-alt);
  border: 2px solid var(--cizgi);
  border-radius: 12px;
  padding: 16px 18px;
}
.yorum-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--aksan, var(--mor));
  color: var(--aksan-metin, #fff);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 14px;
}
.yorum-govde { flex: 1; min-width: 0; }
.yorum-ust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.yorum-yazan { font-weight: 700; }
.yorum-rozet-yonetici {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--mor);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-pil);
}
.yorum-tarih { color: var(--ink-daha-soft); }
.yorum-metin { font-size: 14.5px; line-height: 1.6; white-space: pre-line; }

.yorum-bos { color: var(--ink-soft); font-size: 14px; margin-bottom: 28px; }

.yorum-formu textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  border: 2px solid var(--cizgi);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-govde);
  font-size: 14.5px;
  resize: vertical;
}
.yorum-formu-eylem { display: flex; justify-content: flex-end; margin-top: 10px; }

.yorum-giris-daveti {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--panel-alt);
  border: 2px dashed var(--cizgi);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ==========================================================
   HESAP SAYFALARI (giriş / kayıt / hesabım / arama)
   ========================================================== */

.hesap-sayfa {
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0 50px;
}
.hesap-kutu {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 3px solid var(--cizgi);
  border-radius: var(--radius-kart);
  padding: 34px 30px;
  box-shadow: var(--golge-kart);
}
.hesap-kutu::before {
  content: "";
  position: absolute;
  top: -10px; left: 44px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mor);
  border: 3px solid var(--panel);
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.hesap-kutu h1 { font-size: 23px; margin-bottom: 6px; }
.hesap-kutu p.alt-baslik { margin: 0 0 24px; color: var(--ink-soft); font-size: 14px; }

.form-alan { margin-bottom: 18px; }
.form-alan label {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.form-alan .ipucu { display: block; font-weight: 400; font-size: 12px; color: var(--ink-daha-soft); margin-top: 4px; }
.form-alan input[type="text"],
.form-alan input[type="email"],
.form-alan input[type="password"],
.form-alan select,
.form-alan textarea {
  width: 100%;
  padding: 10px 13px;
  border: 2px solid var(--cizgi);
  border-radius: 10px;
  background: var(--panel-alt);
  color: var(--ink);
  font-family: var(--font-govde);
  font-size: 15px;
}
.form-alan textarea { min-height: 130px; resize: vertical; font-family: var(--font-govde); }
.form-alan-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .form-alan-satir { grid-template-columns: 1fr; } }

.form-eylemler { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2.5px solid var(--cizgi);
  border-radius: var(--radius-pil);
  padding: 10px 20px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: var(--panel-alt);
  color: var(--ink);
  transition: transform 150ms ease;
}
.dugme:hover { transform: translateY(-2px); }
.dugme-birincil { background: var(--mor); border-color: var(--mor); color: #fff; }
.dugme-tehlike { background: var(--hata); border-color: var(--hata); color: #fff; }
.dugme-kucuk { padding: 6px 14px; font-size: 12.5px; }

.bildirim {
  padding: 13px 16px;
  border-radius: 10px;
  border: 2px solid var(--cizgi);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}
.bildirim-basari { background: var(--basari); color: #fff; border-color: var(--basari); }
.bildirim-hata { background: var(--hata); color: #fff; border-color: var(--hata); }

.hesap-satir-alt { margin-top: 20px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ==========================================================
   ARAMA SONUÇLARI
   ========================================================== */

.arama-sonuc-listesi { display: flex; flex-direction: column; gap: 14px; }
.arama-sonuc-karti {
  display: block;
  background: var(--panel);
  border: 2.5px solid var(--cizgi);
  border-left: 7px solid var(--aksan, var(--cizgi));
  border-radius: 14px;
  padding: 18px 20px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.arama-sonuc-karti:hover { transform: translateX(4px); box-shadow: var(--golge-kart); }
.arama-sonuc-karti h3 { font-size: 17px; margin-bottom: 6px; }
.arama-sonuc-karti p { margin: 0; color: var(--ink-soft); font-size: 14px; }

/* ==========================================================
   ALT BİLGİ
   ========================================================== */

.site-footer {
  border-top: 3px solid var(--cizgi);
  background: var(--panel);
}
.serit {
  height: 8px;
  background: linear-gradient(90deg,
    var(--pembe) 0 16.6%, var(--turuncu) 16.6% 33.2%, var(--sari) 33.2% 49.8%,
    var(--yesil) 49.8% 66.4%, var(--mavi) 66.4% 83%, var(--mor) 83% 100%);
}
.site-footer .icerik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  font-size: 13px;
  color: var(--ink-soft);
}
.footer-yonetici-link { font-weight: 600; }
.footer-yonetici-link:hover { color: var(--ink); text-decoration: underline; }

/* ==========================================================
   SAYFA GEÇİŞ ANİMASYONU
   ========================================================== */

/* Kayma mesafesi değişkende: dar ekranda küçültülüyor, böylece
   geçiş sırasında sayfa yana doğru genişlemiyor. */
@keyframes kaymaCikisSol { from { transform: translateX(0); opacity: 1; } to { transform: translateX(calc(-1 * var(--gecis-kaydirma))); opacity: 0; } }
@keyframes kaymaCikisSag { from { transform: translateX(0); opacity: 1; } to { transform: translateX(var(--gecis-kaydirma)); opacity: 0; } }
@keyframes kaymaGirisSag { from { transform: translateX(var(--gecis-kaydirma)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes kaymaGirisSol { from { transform: translateX(calc(-1 * var(--gecis-kaydirma))); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.sayfa-cikis-sol { animation: kaymaCikisSol var(--gecis-suresi) ease forwards; }
.sayfa-cikis-sag { animation: kaymaCikisSag var(--gecis-suresi) ease forwards; }
.sayfa-giris-sag { animation: kaymaGirisSag var(--gecis-suresi) ease forwards; }
.sayfa-giris-sol { animation: kaymaGirisSol var(--gecis-suresi) ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .sayfa-cikis-sol, .sayfa-cikis-sag, .sayfa-giris-sag, .sayfa-giris-sol { animation: none; }
}

/* ==========================================================
   MOBİL — her çerçeve ekrana sığar
   ----------------------------------------------------------
   Sayfanın en üstündeki genel taşma korumasının yanında, dar
   ekranda ölçüler de yeniden ayarlanıyor: kenar boşlukları
   daralıyor, eğik duran kartlar düzleşiyor (dönen bir kutu
   köşeleriyle kutusunun dışına taşar), ızgaralar tek sütuna
   iniyor ve genişliği kestirilemeyen öğeler (tablo, kod bloğu)
   kendi içinde kaydırılabilir hale geliyor.
   ========================================================== */

@media (max-width: 700px) {
  .site-header .icerik { padding-top: 14px; padding-bottom: 14px; }
  .ustbar-eylemler { width: 100%; justify-content: space-between; }
  .hesap-alani { flex-wrap: wrap; gap: 8px; }
  .arama-formu { order: 3; max-width: none; flex-basis: 100%; }
  .hero { padding: 36px 0 30px; }
  .hero-fis { padding: 26px 22px; }
  .bolum { padding: 6px 0 36px; }

  /* Geçiş animasyonu daha kısa kaysın. */
  :root { --gecis-kaydirma: 16px; }

  /* Eğik duran kutular düzleşsin: dönen köşeler dar ekranda
     kutunun dışına taşıp sayfayı yana kaydırıyordu. */
  .hero-fis { transform: none; }
  .not-izgara .not-karti { --donus: 0deg; }
  .not-karti:hover { transform: translateY(-4px); }
  .marka-fis { transform: none; }
}

@media (max-width: 600px) {
  /* Kenar boşlukları: 24px dar ekranda içeriği fazla sıkıştırıyordu. */
  .icerik { padding: 0 16px; }
  .raf-satiri { padding: 0 16px; }
  .site-footer .icerik { padding-left: 16px; padding-right: 16px; }

  /* Sekme rafı kendi içinde kaysın, sayfayı sürüklemesin. */
  .raf-satiri {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hesap-kutu { padding: 26px 20px; }
  .yorum-fisi { padding: 14px 14px; gap: 10px; }
  .yorum-giris-daveti { flex-direction: column; align-items: flex-start; }
}

/* Izgara ve form satırlarının hücreleri, içindeki uzun bir öğe
   yüzünden şişmesin. Bu satır olmadan grid hücresi "min-content"
   kadar genişleyebiliyor ve ızgara ekrandan taşıyor. */
.kategori-izgara > *,
.not-izgara > *,
.form-alan-satir > *,
.arama-sonuc-listesi > * {
  min-width: 0;
}

/* Yazı içindeki tablo ve kod blokları: sayfayı değil, kendilerini
   kaydırsınlar. */
.defter-metin pre,
.yazi-icerik pre {
  max-width: 100%;
}

@media (max-width: 680px) {
  .defter-metin table,
  .yazi-icerik table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .defter-metin th, .defter-metin td { white-space: nowrap; }
}

/* ==========================================================
   DEFTER YAPRAĞI — yazı (not) detay sayfası
   ----------------------------------------------------------
   Her not, kenar çizgisi kendine özel renkte olan çizgili bir
   defter yaprağının içinde durur. Başlık ise yaprağın DIŞINDA,
   ayrı bir kutunun içindedir ve o kutunun çizgi rengi yaprağın
   renginden her zaman farklıdır.

   Ölçü düzeni: --kare (26px) iki satır çizgisi arasındaki mesafe.
   Satır yüksekliği, blok boşlukları ve görsel yükseklikleri hep
   bunun tam katıdır; böylece her satır kendi çizgisinin üzerine
   oturur ve hiçbir şey defterin düzenini kaydırmaz.
   ========================================================== */

.defter {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 0 60px;
}

/* ---------- Başlık kutusu (yaprağın dışında, ayrı kare) ---------- */

.defter-baslik-kutusu {
  position: relative;
  background: var(--panel);
  border: 3px solid var(--baslik-renk, var(--mor));
  border-radius: 14px;
  padding: 24px 26px 20px;
  margin-bottom: 24px;
  box-shadow: 7px 7px 0 -1px color-mix(in srgb, var(--baslik-renk, var(--mor)) 24%, transparent);
}

/* Kutunun üst kenarına oturan küçük etiket şeridi. */
.defter-baslik-kutusu::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 26px;
  width: 84px;
  height: 7px;
  background: var(--baslik-renk, var(--mor));
  border-radius: 0 0 7px 7px;
}

.defter-baslik-kutusu h1 {
  font-size: clamp(26px, 4.4vw, 38px);
  margin: 14px 0 10px;
  line-height: 1.18;
}

.defter-baslik-kutusu .yazi-meta {
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* ---------- Yaprağın kendisi ---------- */

.defter-yaprak {
  position: relative;
  border: 3px solid var(--yaprak-renk, var(--mavi));
  border-radius: 14px;
  background-color: var(--panel);
  /* Çizgili defter: SADECE yatay satır çizgileri, dikey çizgi yok.
     Çizgi, 26px'lik bandın 21-22px aralığına konuyor. Bunun sebebi:
     16.5px yazıda satır kutusunun üstünden taban çizgisine (baseline)
     yaklaşık 19px var; çizgiyi 21.5px'e koyunca harfler tam çizginin
     ÜZERİNE oturuyor, g/y/p/ş gibi alt uzantılar da gerçek bir defterde
     olduğu gibi çizgiyi hafifçe kesiyor. Çizgiyi bandın en altına
     (26px) koysaydık yazının 6-7px altında, havada asılı kalırdı. */
  background-image: linear-gradient(
    to bottom,
    transparent calc(var(--kare) - 5px),
    var(--kare-cizgi) calc(var(--kare) - 5px),
    var(--kare-cizgi) calc(var(--kare) - 4px),
    transparent calc(var(--kare) - 4px)
  );
  background-size: 100% var(--kare);
  background-position: 0 0;
  box-shadow:
    7px 7px 0 -1px color-mix(in srgb, var(--yaprak-renk, var(--mavi)) 24%, transparent),
    var(--golge-kart);
  /* Üst boşluk satır aralığının katı olmalı ki metin çizgilere otursun.
     Alt boşluk 0: son bloğun kendi 26px'lik alt payı zaten tam bir satır
     boşluk bırakıyor, ikisi üst üste binmesin. */
  padding: var(--kare) 26px 0;
  overflow: hidden;
}

.defter-icerik {
  position: relative;
  font-size: 16.5px;
  line-height: var(--kare);
}

/* Yana yaslanmış post-it ve görsellerin yaprak dışına taşmasını engeller. */
.defter-temizle {
  clear: both;
  height: 0;
  font-size: 0;
}

/* ---------- Metin blokları ----------
   Bütün dikey ölçüler --kare'nin katı; böylece satırlar defterin
   çizgilerine oturur. */

.defter-metin p {
  margin: 0 0 var(--kare);
}
.defter-metin h2 {
  font-size: 21px;
  line-height: var(--kare);
  margin: var(--kare) 0 0;
}
.defter-metin h3 {
  font-size: 18px;
  line-height: var(--kare);
  margin: var(--kare) 0 0;
}
.defter-metin ul,
.defter-metin ol {
  margin: 0 0 var(--kare);
  padding-left: 24px;
}
.defter-metin li {
  line-height: var(--kare);
  margin: 0;
}
.defter-metin a {
  text-decoration: underline;
  text-decoration-color: var(--yaprak-renk, var(--mor));
  text-underline-offset: 3px;
  font-weight: 500;
}
.defter-metin blockquote {
  margin: 0 0 var(--kare);
  padding: 0 0 0 18px;
  border-left: 4px solid var(--yaprak-renk, var(--mor));
  color: var(--ink-soft);
  font-style: italic;
}
.defter-metin code {
  background: var(--panel-alt);
  border: 1.5px solid var(--cizgi);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.9em;
}
.defter-metin pre {
  background: var(--panel-alt);
  border: 2px solid var(--cizgi);
  border-radius: 10px;
  /* Dolgu da satır aralığının katı: yoksa kod bloğundan sonraki bütün
     satırlar çizgilerin arasına kayıyor. */
  padding: var(--kare) 18px;
  margin: 0 0 var(--kare);
  overflow-x: auto;
  line-height: var(--kare);
}
.defter-metin pre code { border: none; background: none; padding: 0; }
.defter-metin img {
  border-radius: 10px;
  border: 2.5px solid var(--cizgi);
  margin: 0 0 var(--kare);
  /* Genişlik ekrana sığdırılırken yükseklik de oranını korusun,
     yoksa dar ekranda görsel eziliyor. (Aşağıdaki .defter-gorsel img
     kuralı daha sonra geldiği için blok görsellerini etkilemez.) */
  height: auto;
}
.defter-metin table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--kare);
}
.defter-metin th,
.defter-metin td {
  border: 1.5px solid var(--cizgi);
  /* Dikey dolgu yok: her satır tam bir defter satırı yüksekliğinde kalsın. */
  padding: 0 10px;
  line-height: var(--kare);
}

/* ==========================================================
   POST-IT — artık yazının sonunda değil, konduğu yerde.
   Metnin akışına girer; sola ya da sağa yaslandığında yazı
   etrafından akar, ortada bırakılırsa tek başına durur.
   ========================================================== */

.defter-postit {
  box-sizing: border-box;
  position: relative;
  /* Renk sabit bir listeden gelmiyor: post.php her post-it'e kendi
     rengini --postit-renk olarak veriyor, üzerindeki yazının rengi de
     kağıdın parlaklığına göre PHP tarafında hesaplanıyor. */
  background: var(--postit-renk, var(--sari));
  color: var(--postit-metin, var(--sari-metin));
  width: 236px;
  min-height: 128px;
  padding: 26px 18px 18px;
  margin: 0 0 var(--kare);
  font-family: var(--font-govde);
  font-size: 14.5px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-line;
  box-shadow: 3px 6px 15px -4px rgba(32, 28, 46, 0.32), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transform: rotate(var(--postit-donus, -1.6deg));
  transition: transform 180ms ease, box-shadow 180ms ease;
  z-index: 2;
}
.defter-postit:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 5px 10px 22px -4px rgba(32, 28, 46, 0.38), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  z-index: 3;
}

/* İğne */
.defter-postit::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  /* İğne, kağıdın karşıt tonunda — yani post-it hangi renkte olursa
     olsun iğne üstünde kaybolmuyor. Ton PHP'de hesaplanıyor. */
  background: radial-gradient(circle at 35% 35%, #fff,
    var(--postit-igne, var(--mor)) 60%,
    var(--postit-igne-koyu, #4a2a80) 100%);
}

/* Yaslanma yönleri */
.defter-postit.hiza-sol  { float: left;  margin-right: var(--kare); }
.defter-postit.hiza-sag  { float: right; margin-left: var(--kare); }

/* ORTADA = "tek başına durur".
   clear: both burada şart. Sebebi: yana yaslı bir post-it float'tır ve
   float, normal akıştaki blokların KUTUSUNU itmez — sadece içlerindeki
   satırları daraltır. Post-it'in içinde akacak satır olmadığı için
   ortadaki post-it, yanındakinin üstüne biniyordu; üstelik kutusu tüm
   genişliği kapsadığından "ortala" da tüm genişliğe göre hesaplanıp
   göz kararı ortalanmamış görünüyordu.
   clear ile ortadaki blok önce yandakilerin ALTINA iner, sonra kalan
   tam genişlikte gerçekten ortalanır. */
/* ORTADA = "tek başına durur".
   İki kural birlikte çalışıyor:

   1) `display: flow-root` — bloğa kendi blok biçimlendirme bağlamını
      verir. Sıradan bir blok yanındaki float'ın ÜSTÜNE biner (float
      blokların kutusunu itmez, sadece içlerindeki satırları daraltır;
      post-it'in içinde de akacak satır yoktur). flow-root'lu bir kutu
      ise float'ın üstüne ASLA binemez — yer varsa yanına oturur, yoksa
      kendiliğinden altına iner.

   2) `clear: both` — varsayılan davranış "tek başına, altta". Yalnızca
      hemen öncesinde YANI BOŞ bir post-it varsa main.js "yan-yana"
      sınıfını ekleyip bu clear'ı kaldırıyor; o zaman blok o boşluğu
      doldurmak için yanına oturur. Yanında zaten yazı akan bir
      post-it'in kuyruğuna yapışmasın diye clear varsayılan bırakıldı. */
.defter-postit.hiza-orta {
  float: none;
  display: flow-root;
  clear: both;
  width: min(340px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.defter-postit.hiza-orta.yan-yana,
.defter-gorsel.hiza-orta.yan-yana { clear: none; }

/* Her post-it biraz farklı açıda durur. Açı, post.php tarafından
   --postit-donus değişkeniyle veriliyor (yana yaslı post-it'ler yazının
   yanından akabilmek için tarayıcıda komşu metin bloğunun içine
   taşındığından, :nth-of-type ile vermek güvenilir değil). */

/* ==========================================================
   GÖRSELLER — yüksekliği HER ZAMAN tam kare sayısıdır, böylece
   alt kenarı defterin bir çizgisine denk gelir ve kareli düzen
   bozulmaz. "Otomatik" seçildiğinde main.js görselin kendi
   oranını en yakın tam kareye yuvarlar.
   ========================================================== */

.defter-gorsel {
  box-sizing: border-box;
  --kare-sayisi: 10;
  position: relative;
  height: calc(var(--kare) * var(--kare-sayisi));
  margin: 0 0 var(--kare);
  padding: 0;
  border: 2.5px solid var(--cizgi);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-alt);
}
.defter-gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
  margin: 0;
}
.defter-gorsel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 12px;
  background: rgba(20, 17, 30, 0.74);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.35;
}

.defter-gorsel.hiza-sol  { float: left;  width: 48%; margin-right: var(--kare); }
.defter-gorsel.hiza-sag  { float: right; width: 48%; margin-left: var(--kare); }
/* Tam genişlik görsel de post-it ile aynı kuralı izler (yukarıdaki
   iki maddeye bakın): kendi biçimlendirme bağlamını kurduğu için yana
   yaslı bir bloğun üstüne binmez. */
.defter-gorsel.hiza-orta { float: none; display: flow-root; clear: both; width: 100%; }

/* ---------- Dar ekranlar ---------- */

@media (max-width: 680px) {
  .defter-yaprak {
    padding: var(--kare) 16px 0;
    border-radius: 12px;
  }

  .defter-baslik-kutusu { padding: 20px 18px 18px; }
  .defter-baslik-kutusu::before { left: 18px; width: 64px; }

  /* Yana yaslama dar ekranda okumayı zorlaştırdığı için her şey
     tam genişliğe geçer.

     Genişlik tam 100% DEĞİL: post-it hafifçe eğik durduğu için
     köşeleri kendi kutusunun birkaç piksel dışına çıkıyor ve tam
     genişlikte yaprağın kenarına dayanıp kırpılıyordu. Kenarlarda
     bırakılan pay, eğik köşelerin yaprağın içinde kalmasını sağlar. */
  .defter-postit.hiza-sol,
  .defter-postit.hiza-sag,
  .defter-postit.hiza-orta {
    float: none;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin-left: auto;
    margin-right: auto;
  }
  .defter-gorsel.hiza-sol,
  .defter-gorsel.hiza-sag {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .defter-postit { transition: none !important; }
  .defter-postit:hover { transform: rotate(var(--postit-donus, 0deg)) !important; }
}

/* ==========================================================
   Kategori sayfasındaki küçük eklemeler
   ========================================================== */

/* Kategori sayfasındaki açıklama yaprağı: notlardaki yaprağın aynısı,
   sadece biraz daha dar ve üstündeki başlıktan ayrılması için üst payı var. */
.kategori-yapragi {
  max-width: 720px;
  margin: 18px 0 0;
}

.bolum-not {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-daha-soft);
}

.bos-durum {
  color: var(--ink-soft);
  background: var(--panel-alt);
  border: 2px dashed color-mix(in srgb, var(--cizgi) 35%, transparent);
  border-radius: var(--radius-kart);
  padding: 22px 20px;
  margin: 0;
}

.fis-ok {
  font-weight: 700;
  transition: transform 150ms ease;
}
.kategori-fis:hover .fis-ok { transform: translateX(4px); }

/* Kategori kartında alt kategori adlarının önizlemesi. */
.fis-alt-liste {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-daha-soft);
}