/* ============================================================
   SKAHVE — fiş dolabı blog
   Yeşil çuha masa, saman rengi arşiv fişleri, mürekkep damgalar.
   Display: Archivo · Gövde: Figtree · Daktilo: IBM Plex Mono
   ============================================================ */

:root {
  --masa:    #1F332A;   /* yeşil çuha masa örtüsü */
  --masa2:   #294437;   /* masa üstü yüzey */
  --cizgi:   #3C5847;   /* masa üzerindeki kenarlıklar */
  --kart:    #EFE5CC;   /* saman rengi fiş */
  --kart2:   #E7DAB9;   /* fişin arkası */
  --murekkep:#2B241A;   /* fiş üzerindeki daktilo mürekkebi */
  --kalem:   #6E6354;   /* kurşun kalem grisi */
  --kirmizi: #B5382A;   /* damga kırmızısı */
  --mavi:    #2C5F9E;   /* damga mavisi */
  --mor:     #6A4A9C;   /* damga moru */
  --krem:    #EDE7D5;   /* masa üzerindeki açık metin */
  --soluk:   #A9BCAC;   /* masa üzerindeki ikincil metin */

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", monospace;

  --r: 10px;
  --gecis: 220ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--masa);
  color: var(--krem);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* --- Erişilebilirlik --- */
.atla {
  position: absolute; left: -9999px; top: 0;
  background: var(--kirmizi); color: #FFF6EC;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.atla:focus { left: 0; }
:focus-visible { outline: 3px solid #E0A468; outline-offset: 3px; border-radius: 4px; }

/* --- Üst bar --- */
.ust {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1080px; margin: 0 auto; padding: 20px;
}
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marka-cekmece { width: 34px; height: 34px; }
.marka-ad {
  font-family: var(--f-display); font-weight: 800; font-size: 1.4rem;
  color: var(--krem); letter-spacing: .04em; text-transform: uppercase;
}
.ust-nav { display: flex; gap: 8px; }
.ust-nav a {
  color: var(--soluk); text-decoration: none; font-size: .95rem;
  padding: 10px 14px; border-radius: 8px; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color var(--gecis), background var(--gecis);
}
.ust-nav a:hover { color: var(--krem); background: var(--masa2); }

/* --- Kapak --- */
.kapak { text-align: center; padding: 52px 0 46px; }
.kapak-ust {
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: 14px;
}
.kapak-baslik {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase;
}
.kapak-baslik em { font-style: normal; color: #E8B96A; }
.kapak-alt { color: var(--soluk); max-width: 540px; margin: 18px auto 0; }

/* --- Fişlik (kart ızgarası) --- */
.fislik {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
  padding-bottom: 56px;
}

.fis-kart { perspective: 1100px; display: flex; flex-direction: column; gap: 10px; }

/* Çevrilebilir fiş */
.fis-cevir {
  position: relative; width: 100%; min-height: 300px;
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transform-style: preserve-3d;
  transition: transform 550ms cubic-bezier(.35, 0, .2, 1);
}
.fis-kart:hover .fis-cevir,
.fis-cevir[aria-expanded="true"] { transform: rotateY(180deg); }

.fis-yuz {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 30px 24px 38px;
  background: var(--kart);
  color: var(--murekkep);
  border-radius: 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* fişin üstündeki kırmızı cetvel çizgisi */
.fis-yuz::before {
  content: ""; position: absolute; top: 22px; left: 0; right: 0;
  height: 2px; background: #C75B4A; opacity: .55;
}
/* fişin altındaki çekmece mili deliği */
.fis-yuz::after {
  content: ""; position: absolute; bottom: 10px; left: 50%;
  width: 14px; height: 14px; margin-left: -7px;
  border: 2px solid #C9B98F; border-radius: 50%; background: var(--masa);
}
.fis-arka {
  transform: rotateY(180deg);
  background: var(--kart2);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 27px, #B8CADD66 27px, #B8CADD66 29px);
  justify-content: center; gap: 12px;
}
.fis-arka::before { display: none; }

.fis-damga {
  position: absolute; top: 30px; right: 18px;
  font-family: var(--f-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border: 2px solid currentColor; border-radius: 4px;
  transform: rotate(5deg); opacity: .85;
}
[data-damga="not"]   .fis-damga { color: var(--mavi); }
[data-damga="dosya"] .fis-damga { color: var(--kirmizi); }
[data-damga="derin"] .fis-damga { color: var(--mor); }

.fis-no {
  font-family: var(--f-mono); font-size: .68rem; color: var(--kalem);
  letter-spacing: .1em; margin-bottom: 16px;
}
.fis-baslik {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 1.18rem; line-height: 1.4; color: var(--murekkep);
  margin-top: 6px; flex: 1;
}
.fis-meta {
  font-family: var(--f-mono); font-size: .72rem; color: var(--kalem);
  margin-top: 14px;
}
.fis-ipucu {
  position: absolute; bottom: 12px; right: 16px;
  font-family: var(--f-mono); font-size: .68rem; color: var(--kalem); opacity: .75;
}

/* Arka yüz */
.fis-kenar {
  font-family: var(--f-body); font-style: italic;
  color: #50617E; font-size: 1rem; line-height: 1.5;
  transform: rotate(-1.2deg);
}
.fis-ozet {
  font-family: var(--f-mono); color: #4A4234;
  font-size: .85rem; line-height: 1.8;
}

/* "Yazıyı oku" bağlantısı */
.fis-cek {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 8px;
  background: transparent; border: 1px solid var(--cizgi);
  color: var(--krem); text-decoration: none; font-weight: 500; font-size: .94rem;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.fis-cek:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #FFF6EC; }

/* --- Sayfalama --- */
.sayfalama {
  display: flex; justify-content: center; align-items: center; gap: 22px;
  padding-bottom: 56px; font-family: var(--f-mono); font-size: .9rem;
}
.sayfalama a { color: #E8B96A; text-decoration: none; padding: 10px; }
.sayfalama a:hover { color: var(--krem); }
.sayfalama span { color: var(--soluk); }

/* --- Yazı sayfası: masaya konmuş kağıt --- */
.yazi { max-width: 720px; margin: 32px auto 64px; }
.yazi-kagit {
  background: var(--kart); color: var(--murekkep);
  border-radius: 3px; padding: clamp(28px, 6vw, 56px);
  position: relative;
}
.yazi-kagit::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: #C75B4A; opacity: .5; top: 26px;
}
.yazi-ust { text-align: left; margin-bottom: 36px; padding-top: 16px; }
.yazi-damga {
  display: inline-block;
  font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border: 2px solid currentColor; border-radius: 4px;
  transform: rotate(-3deg); opacity: .85; margin-bottom: 18px;
}
[data-damga="not"]   .yazi-damga { color: var(--mavi); }
[data-damga="dosya"] .yazi-damga { color: var(--kirmizi); }
[data-damga="derin"] .yazi-damga { color: var(--mor); }
.yazi-baslik {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.12;
  text-transform: uppercase; letter-spacing: -.005em;
}
.yazi-meta { font-family: var(--f-mono); font-size: .78rem; color: var(--kalem); margin-top: 12px; }
.yazi-kenar {
  margin-top: 20px; font-style: italic; color: #50617E; font-size: 1.02rem;
  transform: rotate(-.6deg);
}

.yazi-icerik { font-size: 1.05rem; line-height: 1.8; color: #332B1F; }
.yazi-icerik p { margin-bottom: 1.35em; }
.yazi-icerik h2, .yazi-icerik h3, .yazi-icerik h4 {
  font-family: var(--f-display); font-weight: 800; line-height: 1.2;
  margin: 1.8em 0 .6em; text-transform: uppercase; letter-spacing: .01em;
}
.yazi-icerik h2 { font-size: 1.35rem; }
.yazi-icerik h3 { font-size: 1.12rem; }
.yazi-icerik a { color: #9A3A2C; text-underline-offset: 3px; }
.yazi-icerik a:hover { color: var(--murekkep); }
.yazi-icerik strong { color: #1E1812; }
.yazi-icerik ul { margin: 0 0 1.35em 1.2em; }
.yazi-icerik li { margin-bottom: .45em; }
.yazi-icerik blockquote {
  border-left: 3px solid var(--kirmizi); padding: .4em 0 .4em 1.2em;
  margin: 1.6em 0; color: #5A5142; font-style: italic;
}
.yazi-icerik blockquote p:last-child { margin-bottom: 0; }
.yazi-icerik img { max-width: 100%; border-radius: 6px; margin: .4em 0; }
.yazi-icerik code {
  font-family: var(--f-mono); font-size: .88em;
  background: #E2D6B6; padding: .15em .45em; border-radius: 5px;
}
.yazi-icerik pre {
  background: #2B241A; color: #EFE5CC; border-radius: 8px;
  padding: 18px; overflow-x: auto; margin: 0 0 1.35em;
}
.yazi-icerik pre code { background: none; padding: 0; color: inherit; }
.yazi-icerik hr {
  border: none; height: 1px; background: #CDBE99; margin: 2.2em auto; width: 50%;
}

.yazi-alt { text-align: center; margin-top: 40px; }
.yazi-dibi {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .22em;
  color: var(--soluk); margin-bottom: 22px; text-transform: uppercase;
}
.geri {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border: 1px solid var(--cizgi); border-radius: 8px;
  color: var(--krem); text-decoration: none;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.geri:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #FFF6EC; }

/* --- Okudukça dolan OKUNDU mührü --- */
.muhur-olcer {
  position: fixed; right: 18px; bottom: 18px; width: 70px;
  text-align: center; pointer-events: none; z-index: 50;
}
.muhur-olcer svg { width: 58px; height: 58px; display: block; margin: 0 auto; }
.m-dis { fill: none; stroke: var(--krem); stroke-width: 2.5; opacity: .8; }
.m-ic  { fill: #15241D; stroke: var(--krem); stroke-width: 1; opacity: .9; }
.m-dolum { fill: var(--kirmizi); opacity: .85; transition: y 120ms linear, height 120ms linear; }
.olcer-yuzde {
  font-family: var(--f-mono); font-size: .66rem; color: var(--soluk);
  letter-spacing: .08em;
}

/* --- Boş / 404 --- */
.bos { text-align: center; padding: 80px 20px; color: var(--soluk); }
.bos h1 { font-family: var(--f-display); color: var(--krem); margin-bottom: 14px; text-transform: uppercase; }
.bos a { color: #E8B96A; }

/* --- Alt bilgi --- */
.alt {
  text-align: center; padding: 36px 20px 28px;
  border-top: 1px solid var(--cizgi); margin-top: 24px;
}
.alt-soz { font-style: italic; color: var(--soluk); margin-bottom: 8px; }
.alt-not { font-family: var(--f-mono); font-size: .72rem; color: #6F8576; }

/* --- Mobil --- */
@media (max-width: 640px) {
  .kapak { padding: 34px 0 30px; }
  .fislik { grid-template-columns: 1fr; }
  .fis-ipucu::after { content: " (dokun)"; }
  .muhur-olcer { right: 10px; bottom: 10px; }
}

/* --- Hareket azaltma --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fis-cevir { transition: none; }
  .m-dolum { transition: none; }
}

/* --- Fişe bantla iliştirilmiş fotoğraf --- */
.fis-resimli .fis-cevir { min-height: 430px; }
.fis-foto {
  display: block; position: relative;
  width: 88%; margin: 18px auto 6px;
  background: #FDFBF4; padding: 7px 7px 10px;
  transform: rotate(-1.6deg);
  box-shadow: 0 2px 5px rgba(20, 15, 5, .22);
}
.fis-kart:nth-child(even) .fis-foto { transform: rotate(1.3deg); }
.fis-foto img {
  width: 100%; height: 140px; object-fit: cover; display: block;
  filter: saturate(.92) contrast(.98);
}
.fis-foto::before, .fis-foto::after {
  content: ""; position: absolute; top: -9px;
  width: 42px; height: 17px;
  background: #D8CDA4; opacity: .85;
  box-shadow: inset 0 0 4px rgba(120, 100, 50, .25);
}
.fis-foto::before { left: 10px; transform: rotate(-5deg); }
.fis-foto::after  { right: 10px; transform: rotate(4deg); }

.yazi-foto {
  display: block; position: relative;
  background: #FDFBF4; padding: 9px 9px 12px;
  transform: rotate(-.8deg);
  box-shadow: 0 2px 6px rgba(20, 15, 5, .22);
  margin: 10px 0 30px;
}
.yazi-foto img {
  width: 100%; max-height: 360px; object-fit: cover; display: block;
}
.yazi-foto::before, .yazi-foto::after {
  content: ""; position: absolute; top: -10px;
  width: 52px; height: 19px;
  background: #D8CDA4; opacity: .85;
  box-shadow: inset 0 0 4px rgba(120, 100, 50, .25);
}
.yazi-foto::before { left: 16px; transform: rotate(-5deg); }
.yazi-foto::after  { right: 16px; transform: rotate(4deg); }

@media (prefers-reduced-motion: reduce) {
  .fis-foto, .yazi-foto { transform: none; }
}

/* --- Reklam alanları --- */
.reklam-alani { margin: 26px 0; text-align: center; }
.fislik .reklam-alani {
  grid-column: 1 / -1; margin: 2px 0;
  background: var(--masa2); border: 1px dashed var(--cizgi);
  border-radius: var(--r); padding: 16px;
}
.reklam-etiket {
  display: block;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--soluk); margin-bottom: 8px;
}
.yazi-kagit .reklam-alani {
  background: #E7DCBE; border: 1px dashed #C9B98F;
  border-radius: 6px; padding: 14px;
}
.yazi-kagit .reklam-etiket { color: var(--kalem); }
.yazi-alt-reklam { max-width: 720px; margin: 0 auto; }
.reklam-icerik { overflow: hidden; }
.reklam-icerik iframe, .reklam-icerik ins { max-width: 100%; }

/* ============================================================
   GÜNCELLEME: arama, 4'lü dizilim, kenar çubuğu, tırtıklı fiş,
   kategori bulutu, üyelik formları
   ============================================================ */

/* Daha geniş kapsayıcı (4 fiş + kenar çubuğu sığsın) */
main, .ust { max-width: 1280px; }

/* --- Tırtıklı fiş altı (pul/perforasyon kenarı) --- */
.fis-yuz {
  -webkit-mask-image: radial-gradient(circle at 12px 100%, transparent 6px, #000 6.8px);
  -webkit-mask-size: 24px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 12px 100%, transparent 6px, #000 6.8px);
  mask-size: 24px 100%;
  mask-repeat: repeat-x;
  padding-bottom: 44px;
}
.fis-yuz::after { bottom: 18px; } /* çekmece mili deliğini tırtığın üstüne al */

/* --- Arama kutusu --- */
.arama {
  display: flex; gap: 8px; max-width: 460px; margin: 26px auto 0;
}
.arama input[type="search"] {
  flex: 1; min-height: 48px; padding: 0 16px;
  background: var(--masa2); border: 1px solid var(--cizgi); border-radius: 9px;
  color: var(--krem); font: inherit;
}
.arama input[type="search"]::placeholder { color: var(--soluk); }
.arama button {
  min-height: 48px; padding: 0 22px; border: none; border-radius: 9px;
  background: var(--kirmizi); color: #FFF6EC; font: inherit; font-weight: 600;
  cursor: pointer; transition: background var(--gecis);
}
.arama button:hover { background: #C94B3C; }
.filtre-bilgi {
  margin-top: 16px; font-family: var(--f-mono); font-size: .8rem; color: var(--soluk);
}
.filtre-bilgi a { color: #E8B96A; }

/* --- Gövde: fişler + kenar çubuğu --- */
.govde {
  display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: 28px; align-items: start; padding-bottom: 24px;
}
.fislik {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px; padding-bottom: 32px;
}
.fis-resimli .fis-cevir { min-height: 400px; }
.fis-foto img { height: 110px; }
.fis-baslik { font-size: 1.04rem; }

/* --- Kenar çubuğu --- */
.yan { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }
.yan-kutu {
  background: var(--masa2); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 20px;
}
.yan-baslik {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: #E8B96A; margin-bottom: 14px;
}
.yan-liste { list-style: none; }
.yan-liste a {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--krem); text-decoration: none; padding: 9px 10px;
  min-height: 40px; border-radius: 7px; font-size: .92rem;
  transition: background var(--gecis);
}
.yan-liste a:hover, .yan-liste a.aktif { background: var(--masa); }
.yan-liste a span {
  font-family: var(--f-mono); font-size: .72rem; color: var(--soluk);
  border: 1px solid var(--cizgi); border-radius: 99px; padding: 1px 8px;
}
.yan-bos { color: var(--soluk); font-size: .9rem; }
.yan-cagri p { color: var(--soluk); font-size: .9rem; margin-bottom: 14px; }
.yan-cagri .fis-cek { font-size: .9rem; }

/* --- Etiketler (fiş arkası + yazı sayfası) --- */
.fis-etiketler { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fis-etiket {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: lowercase; color: #5A5142; text-decoration: none;
  border: 1px solid #C9B98F; border-radius: 99px; padding: 3px 10px;
  background: rgba(255, 252, 240, .5);
}
a.fis-etiket:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.yazi-etiketler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* --- Kategori bulutu (footer) --- */
.bulut {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  max-width: 720px; margin: 0 auto 26px;
}
.bulut a {
  color: var(--soluk); text-decoration: none;
  font-family: var(--f-mono); letter-spacing: .04em;
  padding: 4px 2px; transition: color var(--gecis);
}
.bulut a:hover { color: #E8B96A; }

/* --- Üyelik sayfaları --- */
.uye-alan { max-width: 860px; margin: 0 auto; padding-bottom: 56px; }
.uye-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.uye-kart {
  background: var(--kart); color: var(--murekkep);
  border-radius: 3px; padding: 28px 26px 34px;
  -webkit-mask-image: radial-gradient(circle at 12px 100%, transparent 6px, #000 6.8px);
  -webkit-mask-size: 24px 100%; -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 12px 100%, transparent 6px, #000 6.8px);
  mask-size: 24px 100%; mask-repeat: repeat-x;
}
.uye-baslik {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.2rem; margin-bottom: 10px;
}
.uye-kart label {
  display: block; font-family: var(--f-mono); font-size: .76rem;
  color: var(--kalem); margin: 16px 0 6px;
}
.uye-kart input[type="text"], .uye-kart input[type="email"],
.uye-kart input[type="password"], .uye-kart input[type="search"],
.uye-kart select, .uye-kart textarea {
  width: 100%; min-height: 46px; padding: 10px 13px;
  background: #FFFDF6; border: 1px solid #C9B98F; border-radius: 7px;
  color: var(--murekkep); font: inherit;
}
.uye-kart textarea { min-height: 260px; font-family: var(--f-mono); font-size: .9rem; line-height: 1.7; }
.uye-kart button {
  margin-top: 20px; min-height: 48px; padding: 0 24px;
  background: var(--kirmizi); color: #FFF6EC; border: none; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.uye-kart button:hover { background: #C94B3C; }
.uye-form-genis { max-width: 720px; margin: 0 auto; }
.form-yanyana { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-ipucu { font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-uyari, .form-tamam {
  max-width: 720px; margin: 0 auto 18px; padding: 13px 16px; border-radius: 8px;
}
.form-uyari { background: #4A2018; border: 1px solid #7A3A2A; color: #F2C5B0; }
.form-tamam { background: #1E3A22; border: 1px solid #3A6A42; color: #C9E8C0; }
.balkupu { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

/* --- Duyarlı düzen --- */
@media (max-width: 1180px) { .fislik { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px)  {
  .govde { grid-template-columns: 1fr; }
  .yan { position: static; flex-direction: row; flex-wrap: wrap; }
  .yan-kutu { flex: 1 1 260px; }
  .fislik { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px)  {
  .fislik { grid-template-columns: 1fr; }
  .uye-izgara, .form-yanyana { grid-template-columns: 1fr; }
}

/* --- SVG kelime bulutu (JS açıkken) --- */
.bulut.bulut-svg { display: block; }
.bulut-svg a { text-decoration: none; }
.bulut-svg a:hover text { fill: #FFF6EC; text-decoration: underline; }
.bulut-svg text { transition: fill 160ms ease; cursor: pointer; }

/* --- 8-bit 404 sayfası --- */
.hata404 { text-align: center; padding: 56px 20px 80px; }
.h404-sayi {
  font-family: var(--f-mono); font-weight: 600;
  font-size: clamp(4.2rem, 14vw, 7.5rem); line-height: 1;
  letter-spacing: .08em; color: var(--krem);
  text-shadow: 4px 4px 0 var(--kirmizi);
}
.h404-resim {
  image-rendering: pixelated; image-rendering: crisp-edges;
  margin: 8px auto 18px; display: block;
  animation: h404-titre 2.4s steps(2) infinite;
}
@keyframes h404-titre {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.h404-baslik {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 4vw, 2.2rem); margin-bottom: 10px;
}
.h404-aciklama { color: var(--soluk); max-width: 420px; margin: 0 auto 26px; }
.h404-buton .fis-cek { display: inline-flex; padding: 0 26px; }
@media (prefers-reduced-motion: reduce) { .h404-resim { animation: none; } }

/* ============================================================
   GÜNCELLEME 5: damga bas, kenar notları, ilgili fişler, fişlerim
   ============================================================ */

/* --- Damga bas (beğeni) --- */
.damga-bas { text-align: center; margin: 36px 0 8px; }
.damga-bas button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  background: transparent; border: 2px solid var(--kirmizi); border-radius: 99px;
  color: var(--krem); font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--gecis), transform 120ms ease;
}
.damga-bas button:hover:not(:disabled) { background: var(--kirmizi); color: #FFF6EC; }
.damga-bas button:disabled { opacity: .75; cursor: default; border-color: var(--cizgi); }
.damga-bas button.damgalandi { animation: damga-vur 360ms ease; border-color: var(--kirmizi); }
@keyframes damga-vur {
  0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-5deg); } 100% { transform: scale(1); }
}
.damga-ikon { color: var(--kirmizi); font-size: 1.2em; }
.damga-bas button:hover:not(:disabled) .damga-ikon { color: #FFF6EC; }
#damgaSayi { font-family: var(--f-mono); font-size: .9rem; }
.damga-aciklama { font-family: var(--f-mono); font-size: .72rem; color: var(--soluk); margin-top: 10px; }

/* --- İlgili fişler --- */
.ilgili { max-width: 720px; margin: 40px auto 0; }
.ilgili-baslik {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--soluk); text-align: center; margin-bottom: 16px;
}
.ilgili-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ilgili-fis {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--kart); color: var(--murekkep);
  border-radius: 3px; padding: 18px 16px 24px; text-decoration: none;
  -webkit-mask-image: radial-gradient(circle at 12px 100%, transparent 5px, #000 5.8px);
  -webkit-mask-size: 22px 100%; -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 12px 100%, transparent 5px, #000 5.8px);
  mask-size: 22px 100%; mask-repeat: repeat-x;
  transition: transform 160ms ease;
}
.ilgili-fis:hover { transform: translateY(-4px); }
.ilgili-damga {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase;
}
[data-damga="not"].ilgili-fis .ilgili-damga { color: var(--mavi); }
[data-damga="dosya"].ilgili-fis .ilgili-damga { color: var(--kirmizi); }
[data-damga="derin"].ilgili-fis .ilgili-damga { color: var(--mor); }
.ilgili-ad { font-family: var(--f-mono); font-weight: 500; font-size: .9rem; line-height: 1.4; }
.ilgili-meta { font-family: var(--f-mono); font-size: .66rem; color: var(--kalem); }

/* --- Okuyucu kenar notları --- */
.notlar { max-width: 720px; margin: 44px auto 0; }
.notlar-baslik {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--soluk); text-align: center; margin-bottom: 18px;
}
.not-liste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.not-kart {
  background: var(--kart2); color: #4A4234;
  border-radius: 3px; padding: 16px 18px; max-width: 86%;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 25px, #B8CADD55 25px, #B8CADD55 27px);
}
.not-kart.sol { align-self: flex-start; transform: rotate(-.5deg); }
.not-kart.sag { align-self: flex-end; transform: rotate(.6deg); }
.not-metin { font-style: italic; color: #50617E; line-height: 1.6; }
.not-imza { font-family: var(--f-mono); font-size: .7rem; color: var(--kalem); margin-top: 8px; }
.not-bos { text-align: center; color: var(--soluk); font-style: italic; margin-bottom: 22px; }
.not-form {
  background: var(--masa2); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 20px;
}
.not-form label {
  display: block; font-family: var(--f-mono); font-size: .74rem;
  color: var(--soluk); margin: 12px 0 6px;
}
.not-form input[type="text"], .not-form textarea {
  width: 100%; min-height: 46px; padding: 10px 13px;
  background: var(--masa); border: 1px solid var(--cizgi); border-radius: 8px;
  color: var(--krem); font: inherit;
}
.not-form textarea { min-height: 90px; resize: vertical; }
.not-form button {
  margin-top: 16px; min-height: 46px; padding: 0 22px;
  background: var(--kirmizi); color: #FFF6EC; border: none; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.not-form button:hover { background: #C94B3C; }

/* --- Fişlerim --- */
.fislerim-satir {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px dashed #C9B98F;
}
.fislerim-satir a { color: var(--murekkep); }
.fislerim-tarih { margin-left: auto; font-family: var(--f-mono); font-size: .72rem; color: var(--kalem); }
.fislerim-bos { color: var(--kalem); font-style: italic; font-size: .92rem; }
.durum {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  border: 2px solid currentColor; border-radius: 4px; padding: 2px 7px;
  transform: rotate(-2deg);
}
.durum-yayin { color: #2E7A3C; }
.durum-bekle { color: #A1700F; }
.durum-red   { color: var(--kirmizi); }

@media (max-width: 640px) {
  .ilgili-liste { grid-template-columns: 1fr; }
  .not-kart { max-width: 100%; }
}

/* ============================================================
   GÜNCELLEME 6: gölgeler, okuma kağıdına tırtık, mobil cilası
   ============================================================ */

/* --- Çevrilebilir fişlere gölge ---
   Not: mask, box-shadow'u keser; filter ise 3D çevirmeyi (preserve-3d)
   düzleştirir. Çözüm: gölge, fişin arkasında translateZ(-1px) ile duran
   ayrı bir katman — çevirme sırasında da fişle birlikte döner. */
.fis-cevir::before {
  content: ""; position: absolute; inset: 5px 7px 12px;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(8, 14, 10, .42), 0 4px 9px rgba(8, 14, 10, .3);
  transform: translateZ(-1px);
}

/* --- Okuma kağıdı: tırtıklı alt kenar + tırtığı izleyen gölge --- */
.yazi-kagit {
  -webkit-mask-image: radial-gradient(circle at 14px 100%, transparent 7px, #000 7.8px);
  -webkit-mask-size: 28px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 14px 100%, transparent 7px, #000 7.8px);
  mask-size: 28px 100%;
  mask-repeat: repeat-x;
  padding-bottom: clamp(44px, 7vw, 68px);
  filter: drop-shadow(0 10px 18px rgba(8, 14, 10, .4)) drop-shadow(0 3px 6px rgba(8, 14, 10, .25));
}

/* İlgili fişler ve üyelik kartlarına da aynı tırtık-takipli gölge */
.ilgili-fis, .uye-kart {
  filter: drop-shadow(0 6px 12px rgba(8, 14, 10, .35));
}
.ilgili-fis:hover { filter: drop-shadow(0 12px 18px rgba(8, 14, 10, .45)); }

/* Bantlı fotoğraflara ufak derinlik (zaten box-shadow var, koru) */

/* --- Mobil cilası --- */
@media (max-width: 560px) {
  main { padding: 0 14px; }
  .ust { flex-wrap: wrap; gap: 4px 6px; padding: 14px 14px 10px; }
  .marka-ad { font-size: 1.2rem; }
  .ust-nav { flex-wrap: wrap; gap: 0; }
  .ust-nav a { padding: 9px 10px; font-size: .86rem; min-height: 42px; }
  .kapak { padding: 26px 0 24px; }
  .kapak-baslik { font-size: clamp(1.7rem, 8.5vw, 2.3rem); }
  .kapak-alt { font-size: .94rem; }
  .arama { margin-top: 18px; }
  .filtre-bilgi { font-size: .74rem; }
  .govde { gap: 18px; padding-bottom: 12px; }
  .fislik { gap: 16px; padding-bottom: 24px; }
  .yan { gap: 12px; }
  .yazi { margin: 14px auto 44px; }
  .yazi-kagit { padding-left: 20px; padding-right: 20px; }
  .yazi-icerik { font-size: 1rem; }
  .damga-bas button { width: 100%; justify-content: center; }
  .not-kart { padding: 14px; }
  .uye-kart { padding: 22px 18px 32px; }
  .bulut { gap: 6px 14px; }
  .sayfalama { gap: 14px; font-size: .82rem; flex-wrap: wrap; }
}

/* Dokunmatik cihazlarda hover-çevirme yerine yalnızca dokunma çalışsın
   (parmak kayınca istemsiz çevrilmesin) */
@media (hover: none) {
  .fis-kart:hover .fis-cevir { transform: none; }
  .fis-cevir[aria-expanded="true"] { transform: rotateY(180deg) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ilgili-fis { transition: none; }
  .damga-bas button.damgalandi { animation: none; }
}

/* --- Duyuru şeridi (menünün altındaki bant) --- */
.serit {
  border-top: 1px dashed var(--cizgi);
  border-bottom: 1px dashed var(--cizgi);
  background: var(--masa2);
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E8B96A;
  white-space: nowrap;
}
.serit-sabit { text-align: center; padding: 11px 16px; white-space: normal; }
.serit-kayan {
  display: inline-flex;
  width: max-content;
  animation: serit-kay 26s linear infinite;
  padding: 11px 0;
}
.serit:hover .serit-kayan { animation-play-state: paused; }
.serit-yarim { display: inline-block; padding-right: 2em; }
.serit-nokta { color: var(--kirmizi); padding: 0 1.4em; }
@keyframes serit-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 560px) { .serit { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) {
  .serit-kayan { animation: none; }
  .serit { text-overflow: ellipsis; }
}

/* --- Kenar notlarına bant (köşeden yapıştırılmış) --- */
.not-kart { position: relative; }
.not-kart::before {
  content: ""; position: absolute; top: -7px;
  width: 64px; height: 19px;
  background: #D8CDA4; opacity: .85;
  box-shadow: inset 0 0 4px rgba(120, 100, 50, .25);
}
.not-kart.sol::before { left: -16px; transform: rotate(-37deg); }
.not-kart.sag::before { right: -16px; transform: rotate(37deg); }

/* --- Yazı sonunda silik Skahve damgası (kağıda vurulmuş mürekkep) --- */
.kagit-muhur {
  position: absolute;
  right: clamp(18px, 4vw, 38px);
  bottom: clamp(40px, 6vw, 56px);
  width: clamp(96px, 14vw, 140px);
  height: auto;
  opacity: .32;
  mix-blend-mode: multiply;
  transform: rotate(-9deg);
  pointer-events: none;
  user-select: none;
}

/* --- Damga bas düğmesi: mum mühür görseli --- */
.damga-muhur-img {
  width: 46px; height: 46px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  transition: transform 160ms ease;
}
.damga-bas button:hover:not(:disabled) .damga-muhur-img { transform: scale(1.12) rotate(-6deg); }
.damga-bas button.damgalandi .damga-muhur-img { animation: muhur-bas 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes muhur-bas {
  0%   { transform: scale(1.7) rotate(-14deg); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.damga-bas button { padding: 0 22px 0 14px; }

/* Yazı içeriği damganın üstüne taşmasın diye alta nefes payı */
.yazi-icerik { padding-bottom: 26px; }

@media (max-width: 560px) {
  .kagit-muhur { opacity: .26; }
}
@media (prefers-reduced-motion: reduce) {
  .damga-bas button.damgalandi .damga-muhur-img { animation: none; }
  .damga-muhur-img { transition: none; }
}

/* --- Paylaşım düğmeleri --- */
.paylas {
  max-width: 720px; margin: 34px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.paylas-baslik {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--soluk); margin-right: 4px;
}
.paylas-dugme {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--cizgi); border-radius: 99px;
  background: var(--masa2); color: var(--krem);
  font: inherit; font-size: .86rem; text-decoration: none; cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis);
}
.paylas-dugme:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #FFF6EC; }
@media (max-width: 560px) { .paylas { gap: 6px; } .paylas-dugme { padding: 0 12px; font-size: .8rem; } }