/* ============================================================
   AKYÜZ FOTOĞRAFÇILIK — logo paleti: KODAK SARISI + KIRMIZI + SİYAH
   Haliç kırmızı-baskın, Akyüz sarı-baskın: iki şube aynı Kodak
   ailesinden ama birbirine karışmıyor.
   ============================================================ */
:root {
  --paper:    #fdfaf3;
  --paper-2:  #f6edd8;
  --ink:      #141210;
  --muted:    #786c56;
  --line:     rgba(20,18,16,.16);
  --accent:   #ffb700;      /* Kodak sarısı */
  --accent-2: #ed1c24;      /* Kodak kırmızısı */
  --dark:     #141210;
  --card-bg:  #ffffff;
  --logo-word: #141210;
  --logo-sub:  #ed1c24;
  --radius:   6px;
  --radius-sm:4px;
  --shadow:   0 26px 60px -30px rgba(70,44,18,.45);
  --shadow-sm:0 12px 28px -14px rgba(70,44,18,.35);
  --map-filter: sepia(.22) saturate(.85) contrast(1.02);
}
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink); overflow-x: hidden;
  background-image:
    repeating-linear-gradient(90deg, rgba(34,26,18,.022) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 85% 6%, rgba(210,118,31,.14), transparent 46%);
  background-attachment: fixed;
}
/* Hero sarı zeminli olduğu için menü baştan sona koyu kalır */
.nav { color: var(--ink); }
.nav.is-stuck { background: rgba(253,250,243,.95); }
.nav .btn--solid { background: var(--dark); color: var(--accent); }

/* Logonun Kodak sarısı, sarı hero'ya karışmasın diye beyaz plaka */
.herologo, .nav .logo {
  background: #fff; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(60,40,0,.35);
}
.herologo { width: fit-content; }
.nav .logo { padding: 6px 12px; }

.ahero .btn--line { background: rgba(255,255,255,.55); color: var(--ink); border-color: rgba(20,18,16,.25); }
.ahero .btn--line:hover { background: #fff; border-color: var(--ink); }
.ahero .btn--solid { background: var(--dark); color: var(--accent); }
.btn--solid { background: var(--dark); color: var(--paper); }
.btn--solid:hover { background: var(--accent); box-shadow: 0 18px 34px -18px var(--accent); }
.btn--line { border-color: var(--line); background: var(--card-bg); }

/* ---------- Hero: film şeridi ---------- */
.ahero {
  position: relative; min-height: 88svh; display: flex; align-items: center; overflow: clip; isolation: isolate;
  padding: calc(var(--nav-h) + 50px) 0 clamp(50px,7vw,90px);
  /* Kodak sarısı zemin — logonun yaşadığı renk */
  background: radial-gradient(ellipse 120% 90% at 20% 10%, #ffce3d 0%, #ffb700 45%, #f0a000 100%);
  color: var(--ink);
}
/* perfore film kenarlıklı şerit */
.filmstrip {
  position: absolute; left: 0; right: 0; top: 12%; z-index: -3; display: flex; gap: 0; width: max-content;
  animation: reel 48s linear infinite; transform: rotate(-3deg);
  background: #0d0906; padding: 26px 0; border-block: 2px solid rgba(255,255,255,.08);
  opacity: .78;
}
.filmstrip--b { top: auto; bottom: 8%; animation-duration: 62s; animation-direction: reverse; transform: rotate(2.4deg); opacity: .5 }
@keyframes reel { to { transform: translateX(-50%) rotate(-3deg) } }
.filmstrip::before, .filmstrip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px;
  background-image: radial-gradient(circle, #fdf8f1 0 3.5px, transparent 4px);
  background-size: 30px 26px; background-position: center; opacity: .5;
}
.filmstrip::before { top: 0 } .filmstrip::after { bottom: 0 }
.filmstrip i {
  display: block; width: 15vw; min-width: 150px; aspect-ratio: 3/2; margin-inline: 5px;
  background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.1);
  filter: sepia(.28) saturate(.9);
}
.ahero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(255,183,0,.96) 0%, rgba(255,183,0,.86) 42%, rgba(255,183,0,.34) 100%);
}
.ahero__glow { position: absolute; inset: 0; z-index: -2; opacity: .5 }
.ahero__title { font-size: clamp(2.5rem,7vw,5.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 300 }
.ahero__title b { font-weight: 800; color: var(--accent-2) }
.ahero__stamp {
  display: inline-flex; align-items: center; gap: .6em; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid rgba(20,18,16,.3); padding: .55em 1.2em; border-radius: 3px; color: var(--ink); font-weight: 600;
  transform: rotate(-1.2deg); background: rgba(255,255,255,.4);
}
/* Sarı zeminde film şeridi kontrastı */
.ahero .filmstrip { opacity: .5; }
.ahero .filmstrip i { filter: sepia(.15) saturate(.95) contrast(1.05); }

/* Gayrettepe şubesinin gerçek fotoğrafları */
.a1 { background-image: url("assets/img/akyuz-dukkan/a06.jpg") }  /* tabela            */
.a2 { background-image: url("assets/img/akyuz-dukkan/a01.jpg") }  /* çerçeve vitrini   */
.a3 { background-image: url("assets/img/akyuz-dukkan/a07.jpg") }  /* dükkân cephesi    */
.a4 { background-image: url("assets/img/akyuz-dukkan/a02.jpg") }  /* resepsiyon        */
.a5 { background-image: url("assets/img/akyuz-dukkan/a05.jpg") }  /* çekim köşesi      */
.a6 { background-image: url("assets/img/akyuz-dukkan/a04.jpg") }  /* düzenleme masası  */
.a7 { background-image: url("assets/img/akyuz-dukkan/a03.jpg") }  /* giriş koridoru    */
.a8 { background-image: url("assets/img/akyuz-dukkan/a08.jpg") }  /* sokaktan görünüm  */
.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8 { background-size: cover; background-position: center }

/* ---------- Tezgâh kartları ---------- */
.bench {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px,2.6vw,32px); position: relative; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.bench::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0);
  transform-origin: left; transition: transform .5s var(--ease);
}
.bench:hover { transform: translateY(-6px); box-shadow: var(--shadow) }
.bench:hover::after { transform: scaleX(1) }
.bench__ico { font-size: 1.7rem; margin-bottom: 12px; display: block }
.bench h3 { font-size: 1.1rem; margin-bottom: .45rem }
.bench p { font-size: .91rem; color: var(--muted) }
.bench ul { margin-top: 12px; font-size: .86rem; color: var(--muted) }
.bench li { padding-left: 14px; position: relative; margin-top: .35rem }
.bench li::before { content: "·"; position: absolute; left: 3px; color: var(--accent); font-weight: 700 }

/* ---------- Vesikalık ölçü tablosu ---------- */
.sizes { width: 100%; border-collapse: collapse; font-size: .93rem }
.sizes th, .sizes td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line) }
.sizes thead th {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--ink);
}
.sizes tbody tr { transition: background .25s }
.sizes tbody tr:hover { background: var(--paper-2) }
.sizes td:first-child { font-weight: 600 }
.tablewrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card-bg) }

/* ---------- Vitrin: polaroid ---------- */
.polaroid {
  background: #fff; padding: 12px 12px 46px; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); position: relative;
}
.polaroid:nth-child(odd)  { transform: rotate(-1.4deg) }
.polaroid:nth-child(even) { transform: rotate(1.2deg) }
.polaroid:hover { transform: rotate(0) translateY(-8px) scale(1.02); box-shadow: var(--shadow); z-index: 2 }
.polaroid > div { aspect-ratio: 1/1; background-size: cover; background-position: center; filter: sepia(.14) }
.polaroid span {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .8rem; color: var(--muted);
}

.band { background: var(--paper-2); border-block: 1px solid var(--line) }
.dark-band { background: var(--dark); color: #f2e6d8; --muted: #b39d84; --line: rgba(255,255,255,.13); --card-bg: rgba(255,255,255,.05) }

.acc__item { border-bottom: 1px solid var(--line) }
.acc__head { width:100%; text-align:left; display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:20px 0; font-size:1.02rem; font-weight:600 }
.acc__head i { font-style:normal; transition:transform .35s var(--ease); color:var(--accent) }
.acc__item.is-open .acc__head i { transform:rotate(45deg) }
.acc__body { display:none; padding-bottom:20px; color:var(--muted); font-size:.94rem; max-width:74ch }
.acc__item.is-open .acc__body { display:block }