/* ---------------------------------------------------------------------------
   TANITIM SITESI (docs/site-yapisi.md, docs/tasarim-sistemi.md §21)
   Cizim: Urunler2.html. Renkler YALNIZCA asagidaki degiskenlerden; acik mod
   varsayilan, koyu mod isletim sisteminin tercihinden.
   --------------------------------------------------------------------------- */
:root {
  --zemin: #F6F2EA;
  --metin: #191512;
  --soluk: #6B6058;
  --cizgi: #E4DCD0;
  --vurgu: #0E4A47;
  --vurgu-dolgu: #0E4A47;
  --vurgu-dolgu-yazi: #F6F2EA;
  --vurgu-hafif: rgba(14, 74, 71, .05);
  --foto-zemin: #EFE7DC;
  --koyu: #16100C;
  --koyu-metin: #F6EEE4;
  --koyu-soluk: #A89488;
  --koyu-cizgi: #30241C;
  --koyu-cizgi2: #4A382C;
  --koyu-yuzey: #221A14;
  --koyu-yuzey2: #2C2219;
  --canli-yesil: #0E9F6E;
  --canli-yesil-yazi: #06281C;
  --yildiz: #C98A04;
  /* telefon cercevesi (musteri sayfasinin taklidi; iki modda ayni) */
  --tel-cerceve: #0C0806;
  --tel-ekran: #FBF7F5;
  --tel-kapak1: #8E5B47;
  --tel-kapak2: #C98B72;
  --tel-logo: #B5591C;
  --tel-beyaz: #FFFFFF;
  --tel-metin: #1A1512;
  --tel-soluk: #6E635C;
  --tel-rozet: #07704E;
  --tel-rozet-zemin: #E3F5EC;
  --tel-cizgi: #EDE2DB;
  --tel-d1a: #C06A2A;
  --tel-d1b: #8C4412;
  --tel-d2a: #9A5A28;
  --tel-d2b: #70401A;
  --tel-urun1: #E8B9A6;
  --tel-yildiz: #C98A04;
  /* WhatsApp kutusu */
  --wa: #0E8349;
  --wa-koyu: #0A5E37;
  --wa-zemin: #F3EFE9;
  --wa-balon: #FFFFFF;
  --wa-soluk: #8B8178;
  --wa-yer: #9A8F86;
  /* cerez cubugu */
  --cz-zemin: #191512;
  --cz-metin: #F6F2EA;
  --cz-soluk: #C4B8AC;
  --cz-cizgi: #4A423A;
  --golge: rgba(26, 18, 12, .22);
  --golge-tel: rgba(0, 0, 0, .45);
  --ortu: rgba(20, 14, 10, .22);
  --oynat: rgba(18, 12, 8, .74);

  --serif: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --yan: 56px;
  --ic: max(var(--yan), calc((100vw - 1328px) / 2));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #14100D;
    --metin: #F3ECE3;
    --soluk: #AA9B8E;
    --cizgi: #2E2620;
    --vurgu: #7CC0B7;
    --vurgu-dolgu: #1B6A64;
    --vurgu-dolgu-yazi: #F6F2EA;
    --vurgu-hafif: rgba(124, 192, 183, .07);
    --foto-zemin: #241D18;
    --koyu: #0B0806;
    --koyu-cizgi: #2A2019;
    --koyu-yuzey: #1B1511;
    --koyu-yuzey2: #241B15;
    --yildiz: #E0A92A;
    --wa-zemin: #1E1915;
    --wa-balon: #2A231E;
    --wa-soluk: #A89C91;
    --wa-yer: #8F8378;
    --cz-zemin: #26201B;
    --golge: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--zemin); color: var(--metin); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img, picture, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.gz-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- ust menu ---- */
.ust { display: flex; align-items: center; gap: 40px; padding: 24px var(--ic); border-bottom: 1px solid var(--cizgi); }
.marka { display: block; flex: none; line-height: 0; }
.marka img { display: block; height: 34px; width: auto; }
.men { margin-left: auto; display: flex; gap: 28px; font-size: 15px; color: var(--soluk); }
.men a { white-space: nowrap; }
.men a:hover { color: var(--metin); }
.men .se { color: var(--metin); font-weight: 700; }
.cta { padding: 11px 22px; border: 1.5px solid var(--metin); border-radius: 2px; font-size: 15px; font-weight: 700; white-space: nowrap; }

/* ---- kahraman ---- */
.kah { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; }
.kah .sol { padding: 80px 56px 80px var(--ic); }
.kah .kfoto { width: 100%; height: auto; }
h1 { font-family: var(--serif); font-size: 58px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.alt { font-size: 19px; line-height: 1.6; color: var(--soluk); margin-top: 22px; max-width: 46ch; }
.eyl { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.b1 { background: var(--vurgu-dolgu); color: var(--vurgu-dolgu-yazi); padding: 16px 26px; border-radius: 2px; font-weight: 700; font-size: 15.5px; }
.b1 i { display: block; font-style: normal; font-weight: 400; font-size: 13px; opacity: .75; margin-top: 2px; }
.b2 { border: 1.5px solid var(--metin); padding: 16px 26px; border-radius: 2px; font-weight: 700; font-size: 15.5px; }
.b2 i { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: var(--soluk); margin-top: 2px; }

/* ---- dort adim ---- */
.adim { display: flex; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); padding: 0 calc(var(--ic) - 56px); }
.adim > div { flex: 1; padding: 18px 24px; border-right: 1px solid var(--cizgi); display: flex; align-items: baseline; gap: 11px; }
.adim > div:last-child { border-right: 0; }
.adim .n { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--vurgu); }
.adim b { display: block; font-size: 15.5px; font-weight: 700; }
.adim p { font-size: 13.5px; color: var(--soluk); margin-top: 3px; }
.adim em { display: block; font-style: normal; font-size: 12.5px; color: var(--vurgu); font-weight: 700; margin-top: 4px; }

section { padding: 74px var(--ic); }
h2 { font-family: var(--serif); font-size: 38px; font-weight: 700; letter-spacing: -.015em; }
h3 { font-family: var(--serif); font-weight: 700; }
.knot { font-size: 16.5px; color: var(--soluk); margin-top: 10px; max-width: 62ch; line-height: 1.55; }
.bag { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--vurgu); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* ---- koyu bolumler (canli, kanal) ---- */
.canli, .koyu { background: var(--koyu); color: var(--koyu-metin); }
.canli h2, .koyu h2 { color: var(--koyu-metin); }
.canli .knot, .koyu .knot { color: var(--koyu-soluk); }

/* ---- canli gosterim: telefon + etkilesim paneli. 10 sn'lik dongu, yalnizca CSS. ----
   Her sektorde ayni akis (views/site/urunler.ejs):
   0,4 sn NFC dalgasi (iki kez) · 2,0 sn isletme sayfasi · 3,6 sn "Google'da
   degerlendir" basilir · 4,6 sn Google degerlendirme ekrani, bes yildiz ·
   5,4 sn panelde okutma 83 -> 84 ve yeni satir sagdan · 10 sn basa doner. */
.sahne { display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: center; margin-top: 42px; }
.tel { width: 292px; height: 508px; border: 9px solid var(--tel-cerceve); border-radius: 38px; background: var(--tel-ekran);
  overflow: hidden; position: relative; box-shadow: 0 20px 50px var(--golge-tel); color: var(--tel-metin); }
.tel .kapak { height: 84px; background: linear-gradient(135deg, var(--tel-kapak1), var(--tel-kapak2)); }
.tel .bas { display: flex; flex-direction: column; align-items: center; margin-top: -26px; }
.tel .lg { width: 54px; height: 54px; border-radius: 17px; background: var(--tel-logo); border: 3px solid var(--tel-beyaz);
  display: flex; align-items: center; justify-content: center; color: var(--tel-beyaz); font-weight: 800; font-size: 19px; }
.tel .ad { font-weight: 700; font-size: 16px; margin-top: 8px; color: var(--tel-metin); }
.tel .rz { font-size: 11px; color: var(--tel-rozet); background: var(--tel-rozet-zemin); padding: 3px 9px; border-radius: 7px; margin-top: 5px; }
/* kanal dugmeleri izgarasi; son dugme (Google) genis ve dolu */
.kdz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 14px 0; }
.kd { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 13px; background: var(--tel-beyaz);
  border: 1px solid var(--tel-cizgi); font-size: 13.5px; font-weight: 700; line-height: 1.15; color: var(--tel-metin); overflow: hidden; }
.kd .p { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; background: var(--tel-logo); }
.kd.g { grid-column: 1 / -1; justify-content: center; height: 50px; border: 0; color: var(--tel-beyaz);
  background: linear-gradient(135deg, var(--tel-d1a), var(--tel-d1b)); font-size: 14.5px; }
.kdz > .kd:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
/* akis */
.sahne .sayfa { opacity: 0; animation: d-sayfa 10s ease-out infinite; }
.sahne .kd.g { animation: d-bas 10s ease-out infinite; }
.g-ekran { position: absolute; inset: 0; background: var(--tel-beyaz); display: flex; flex-direction: column; align-items: center;
  padding: 92px 22px 0; text-align: center; opacity: 0; animation: d-gekran 10s ease-out infinite; }
.g-ekran .g-ust { font-size: 22px; font-weight: 700; color: var(--tel-soluk); letter-spacing: -.01em; }
.g-ekran b { font-size: 17px; margin-top: 26px; }
.g-ekran .g-bas { font-size: 13.5px; color: var(--tel-soluk); margin-top: 6px; }
.g-ekran .yildiz { display: flex; gap: 6px; margin-top: 22px; color: var(--tel-cizgi); }
.g-ekran .yildiz svg { animation: d-yildiz 10s ease-out infinite; animation-delay: var(--y); }
.g-ekran .g-alt { font-size: 12px; color: var(--tel-soluk); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tel-cizgi); align-self: stretch; }
.dalga { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px;
  border: 2px solid var(--tel-logo); opacity: 0; animation: d-dalga1 10s ease-out infinite; pointer-events: none; z-index: 2; }
.dalga.iki { animation-name: d-dalga2; }
@keyframes d-dalga1 { 0%, 4% { transform: scale(.4); opacity: 0; } 4.01% { opacity: .95; } 15% { transform: scale(6); opacity: 0; } 100% { transform: scale(6); opacity: 0; } }
@keyframes d-dalga2 { 0%, 9% { transform: scale(.4); opacity: 0; } 9.01% { opacity: .95; } 20% { transform: scale(6); opacity: 0; } 100% { transform: scale(6); opacity: 0; } }
@keyframes d-sayfa { 0%, 20% { opacity: 0; transform: translateY(8px); } 23%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes d-bas { 0%, 36% { transform: none; box-shadow: 0 0 0 0 transparent; } 37.5%, 45% { transform: scale(.96); box-shadow: 0 0 0 4px var(--tel-urun1); } 46%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; } }
@keyframes d-gekran { 0%, 46% { opacity: 0; transform: translateX(28px); } 49%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes d-yildiz { 0%, 49% { color: var(--tel-cizgi); transform: scale(.8); } 51%, 96% { color: var(--tel-yildiz); transform: none; } 100% { color: var(--tel-cizgi); transform: none; } }
@keyframes d-o1 { 0% { opacity: 1; } 54% { opacity: 0; } 100% { opacity: 0; } }
@keyframes d-o2 { 0% { opacity: 0; } 54% { opacity: 1; } 100% { opacity: 1; } }

.pnl { background: var(--koyu-yuzey); border: 1px solid var(--koyu-cizgi); border-radius: 14px; overflow: hidden; }
.pnl .ph { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--koyu-cizgi); }
.pnl .ph b { font-size: 16.5px; }
.pnl .rz { margin-left: auto; background: var(--canli-yesil); color: var(--canli-yesil-yazi); font-weight: 800; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }
.sip { display: grid; grid-template-columns: 78px 1fr 110px 90px; gap: 16px; align-items: center;
  padding: 15px 20px; border-bottom: 1px solid var(--koyu-cizgi); font-size: 14.5px; }
.sip .m { font-weight: 700; }
.sip .z { color: var(--koyu-soluk); font-size: 13px; display: block; margin-top: 2px; }
.sip .f { text-align: right; font-weight: 700; }
/* etkilesim paneli: uc sayac + son hareketler */
.sayac3 { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--koyu-cizgi); }
.sayac3 > div { padding: 16px 20px; }
.sayac3 > div + div { border-left: 1px solid var(--koyu-cizgi); }
.sayac3 span { font-size: 12.5px; color: var(--koyu-soluk); display: block; }
.sayac3 b { display: grid; font-family: var(--serif); font-size: 30px; font-weight: 700; margin-top: 2px; }
.sayac3 b.art > i { grid-area: 1 / 1; font-style: normal; animation: 10s infinite steps(1, end); }
.sayac3 b.art > .o1 { animation-name: d-o1; } .sayac3 b.art > .o2 { opacity: 0; animation-name: d-o2; }
.hk-liste { list-style: none; }
.hk { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--koyu-cizgi); font-size: 14.5px; }
.hk:last-child { border-bottom: 0; }
.hk .p { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; background: var(--koyu-soluk); }
.hk .o { font-weight: 700; }
.hk .z { margin-left: auto; color: var(--koyu-soluk); font-size: 13px; white-space: nowrap; }
/* yeni satir girene kadar yer kaplamaz (listede bosluk kalmaz) */
.sahne .hk.yeni { background: var(--koyu-yuzey2); opacity: 0; overflow: hidden; animation: d-hk 10s ease-out infinite; }
@keyframes d-hk { 0%, 54% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } 59%, 95% { opacity: 1; transform: none; max-height: 60px; padding-top: 14px; padding-bottom: 14px; border-bottom-width: 1px; } 100% { opacity: 0; transform: none; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } }
.sip .m .p { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 7px; background: var(--koyu-soluk); vertical-align: 1px; }

/* ---- sektor sekmeleri, olcu karsilastirmasi, model kartlari ---- */
.sek { display: flex; flex-wrap: wrap; margin: 30px 0 0; border-bottom: 1px solid var(--cizgi); }
.sek a { padding: 13px 18px 14px; font-size: 15px; color: var(--soluk); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sek a:hover { color: var(--metin); }
.sek a.se { color: var(--metin); font-weight: 700; border-bottom-color: var(--vurgu); }
.olc { --o: 4.6px; display: flex; align-items: flex-end; gap: 24px; margin: 42px 0 6px; flex-wrap: wrap; }
.olc .cub { width: calc(var(--en) * var(--o)); height: calc(var(--boy) * var(--o)); border: 1.5px solid var(--vurgu); border-radius: 2px; background: var(--vurgu-hafif); }
.olc .ad { font-size: 12.5px; font-weight: 700; margin-top: 9px; letter-spacing: .05em; white-space: nowrap; }
.olc .ad span { color: var(--soluk); font-weight: 400; letter-spacing: 0; }
.izg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); margin-top: 36px; }
.kart { background: var(--zemin); padding-bottom: 22px; }
.kart .f { width: 100%; height: 300px; object-fit: contain; background: var(--foto-zemin); padding: 14px; }
.kart .g { padding: 18px 24px 0; }
.kart h3 { font-size: 26px; }
.kart .sat { display: flex; gap: 14px; font-size: 13.5px; color: var(--soluk); margin-top: 5px; }
.kart .cum { font-size: 15px; line-height: 1.55; margin-top: 12px; }
.kart .fi { font-family: var(--serif); font-size: 24px; font-weight: 700; margin-top: 14px; }
.kart .teklif { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--vurgu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kart .teklif:hover { text-decoration-thickness: 2px; }

.tablo { overflow-x: auto; margin-top: 46px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; color: var(--soluk); padding: 14px 12px 9px; border-bottom: 2px solid var(--metin); white-space: nowrap; }
th.sag, td.sag { text-align: right; } th.ort, td.ort { text-align: center; }
td { padding: 13px 12px; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
td:first-child, th:first-child { padding-left: 0; } td:last-child, th:last-child { padding-right: 0; }
td.ad, td.fi { font-family: var(--serif); font-size: 21px; font-weight: 700; white-space: nowrap; }
.var { color: var(--vurgu); font-weight: 700; }

/* ---- kanal secimi ---- */
.mod { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.mod button { padding: 9px 16px; border: 1px solid var(--koyu-cizgi); border-radius: 999px; font-size: 14px; color: var(--koyu-soluk); }
.mod button[aria-pressed="true"] { background: var(--koyu-metin); color: var(--koyu); border-color: var(--koyu-metin); font-weight: 700; }
.sayac { display: flex; align-items: flex-end; gap: 14px; margin-top: 26px; }
.sayac .n { font-family: var(--serif); font-size: 80px; line-height: .82; font-weight: 700; }
.sayac .e { font-size: 16px; color: var(--koyu-soluk); padding-bottom: 9px; }
.kgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-top: 26px; }
.kan { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--koyu-cizgi); border-radius: 10px; font-size: 13.5px; transition: opacity .2s, background-color .2s; }
.kan .p { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; }
.kan.ac { background: var(--koyu-yuzey); border-color: var(--koyu-cizgi2); } .kan.ka { opacity: .26; }

/* ---- sistem kutulari ---- */
.sis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); margin-top: 38px; }
.sis > div { background: var(--zemin); padding: 26px 24px 28px; }
.sis .i { color: var(--vurgu); display: block; }
.sis h3 { font-size: 21px; margin-top: 12px; }
.sis p { font-size: 15px; line-height: 1.55; color: var(--soluk); margin-top: 7px; }
/* iki grup: her isletmede olanlar (4 kutu) + sektore gore acilan moduller (kucuk liste) */
h3.grup { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--soluk); margin-top: 38px; }
h3.grup + .sis { margin-top: 14px; }
.sis-4 { grid-template-columns: repeat(4, 1fr); }
.sis-tek { grid-template-columns: 1fr !important; } /* tek kutulu grup tam genislik (Platform "Her isletmede var") */
.moduller { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.moduller h3 { font-size: 19px; }
.moduller p { font-size: 15px; color: var(--soluk); margin-top: 4px; }
.moduller ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.moduller li { padding: 7px 14px; border: 1px solid var(--cizgi); border-radius: 999px; font-size: 14px; color: var(--soluk); }

/* ---- isletmelerde (videolar) ---- */
.kanit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.vid { position: relative; border-radius: 3px; overflow: hidden; display: block; width: 100%; padding: 0; text-align: left; }
.vid img, .vid video { width: 100%; height: 260px; object-fit: contain; background: var(--foto-zemin); }
.vid .oy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ortu); }
.vid .oy i { width: 56px; height: 56px; border-radius: 999px; background: var(--oynat); border: 1.5px solid var(--tel-beyaz); display: flex; align-items: center; justify-content: center; }
.vid .oy i::after { content: ""; border-left: 14px solid var(--tel-beyaz); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.et { padding: 13px 2px 0; } .et b { font-size: 16px; font-weight: 700; } .et span { font-size: 14px; color: var(--soluk); }
.puan { display: flex; align-items: center; gap: 13px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.puan .n { font-family: var(--serif); font-size: 38px; font-weight: 700; }
.puan .y { color: var(--yildiz); display: flex; gap: 3px; } .puan .t { font-size: 15px; color: var(--soluk); }

/* ---- alt uclu ---- */
.ek { display: flex; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); margin: 0 calc(var(--ic) - 56px); }
.ek .h { background: var(--zemin); padding: 26px 24px; flex: 1; }
.ek h3 { font-size: 21px; }
.ek p { font-size: 15px; line-height: 1.55; color: var(--soluk); margin-top: 7px; }

footer { padding: 32px var(--ic) 120px; border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--soluk); display: flex; gap: 16px; flex-wrap: wrap; }
footer .sag { margin-left: auto; }
footer .alt-logo { flex: 1 0 100%; line-height: 0; }
footer .alt-logo img { height: 28px; width: auto; }
footer .alt-tel { display: flex; flex-direction: column; gap: 4px; }

/* ---- WhatsApp kutusu ---- */
.wa-kok { position: fixed; right: 28px; bottom: calc(28px + var(--cz-yuk, 0px)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.wa-ac { width: 58px; height: 58px; border-radius: 999px; background: var(--wa); color: var(--tel-beyaz); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px var(--golge); }
.wa { width: 326px; max-width: calc(100vw - 32px); border-radius: 16px; overflow: hidden; background: var(--wa-balon); box-shadow: 0 18px 44px var(--golge); border: 1px solid var(--cizgi); }
.wa .h { background: var(--wa); color: var(--tel-beyaz); padding: 14px 16px; display: flex; align-items: center; gap: 11px; }
.wa .h .av { width: 36px; height: 36px; border-radius: 999px; background: var(--wa-koyu); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.wa .h b { font-size: 15px; display: block; }
.wa .h span span { font-size: 12px; opacity: .85; }
.wa .h .kapat { margin-left: auto; color: var(--tel-beyaz); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
.wa .g { padding: 16px; background: var(--wa-zemin); }
.wa .bl { background: var(--wa-balon); border-radius: 3px 13px 13px 13px; padding: 11px 13px; font-size: 14.5px; line-height: 1.5; max-width: 92%; box-shadow: 0 1px 2px rgba(0, 0, 0, .07); }
.wa .bl span { display: block; font-size: 11px; color: var(--wa-soluk); margin-top: 5px; }
.wa form { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-top: 1px solid var(--cizgi); background: var(--wa-balon); }
.wa input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--cizgi); border-radius: 999px; padding: 0 14px; font-size: 14px; background: transparent; }
.wa input::placeholder { color: var(--wa-yer); }
.wa .gn { width: 38px; height: 38px; border-radius: 999px; background: var(--wa); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa .gn::after { content: ""; border-left: 13px solid var(--tel-beyaz); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }

/* ---- cerez cubugu ---- */
.cz { position: fixed; left: 28px; bottom: 28px; right: 28px; z-index: 30; background: var(--cz-zemin); color: var(--cz-metin);
  border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.cz b { font-weight: 700; } .cz p { color: var(--cz-soluk); line-height: 1.5; }
.cz .d { margin-left: auto; display: flex; gap: 9px; flex-shrink: 0; }
.cz .d button { padding: 9px 18px; border-radius: 2px; font-weight: 700; font-size: 14px; }
.cz .d .k1 { background: var(--cz-metin); color: var(--cz-zemin); }
.cz .d .k2 { border: 1px solid var(--cz-cizgi); color: var(--cz-metin); }

/* ======================================================================
   DIGER SAYFALAR (ayni dil: ayni olculer, ayni bolum yapisi)
   ====================================================================== */
.sade { padding: 80px var(--ic) 64px; border-bottom: 1px solid var(--cizgi); }
.sade .alt { max-width: 56ch; }

/* ---- Anasayfa: sektorler arasinda donen telefon ----
   Katman sayisi sektor sayisina bagli; zamanlama sayfadaki <style>'da
   (views/site/anasayfa.ejs). */
.ana-sahne { display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: center; margin-top: 42px; }
.tel .katmanlar { position: relative; }
.tel .katman { position: absolute; inset: 0; opacity: 0; }
.tel .katman:first-child { position: relative; }
.sliste { list-style: none; border-top: 1px solid var(--koyu-cizgi); }
.sliste li { border-bottom: 1px solid var(--koyu-cizgi); color: var(--koyu-soluk); }
.sliste a { display: flex; align-items: baseline; gap: 16px; padding: 13px 4px; }
.sliste a b { font-family: var(--serif); font-size: 19px; font-weight: 700; min-width: 11ch; }
.sliste a span { font-size: 14px; }
.sliste a:hover { color: var(--koyu-metin); }
.olc .fiy { font-size: 13px; color: var(--soluk); margin-top: 3px; }

/* ---- Platform: siparis listesi dolarken rapor degisir (12 sn) ---- */
.pl-sahne { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; margin-top: 42px; align-items: start; }
.pl-sahne .sip { grid-template-columns: 140px 1fr 90px; }
.pl-sahne .sip .f { white-space: nowrap; }
.pl-sahne .sip.gel { background: var(--koyu-yuzey2); opacity: 0; overflow: hidden; animation: 12s ease-out infinite; }
.pl-sahne .sip.g1 { animation-name: p-g1; } .pl-sahne .sip.g2 { animation-name: p-g2; } .pl-sahne .sip.g3 { animation-name: p-g3; } .pl-sahne .sip.g4 { animation-name: p-g4; }
@keyframes p-g1 { 0%, 8.33% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } 12.5%, 95% { opacity: 1; transform: none; max-height: 90px; padding-top: 15px; padding-bottom: 15px; border-bottom-width: 1px; } 100% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } }
@keyframes p-g2 { 0%, 29.17% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } 33.33%, 95% { opacity: 1; transform: none; max-height: 90px; padding-top: 15px; padding-bottom: 15px; border-bottom-width: 1px; } 100% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } }
@keyframes p-g3 { 0%, 50% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } 54.17%, 95% { opacity: 1; transform: none; max-height: 90px; padding-top: 15px; padding-bottom: 15px; border-bottom-width: 1px; } 100% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } }
@keyframes p-g4 { 0%, 70.83% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } 75%, 95% { opacity: 1; transform: none; max-height: 90px; padding-top: 15px; padding-bottom: 15px; border-bottom-width: 1px; } 100% { opacity: 0; transform: translateX(26px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } }
.rapor { background: var(--koyu-yuzey); border: 1px solid var(--koyu-cizgi); border-radius: 14px; padding: 18px 20px 20px; }
.rapor .rb { font-size: 16.5px; font-weight: 700; }
.rapor .sat { display: flex; gap: 32px; margin-top: 16px; flex-wrap: wrap; }
.rapor .sat span { font-size: 12.5px; color: var(--koyu-soluk); display: block; }
.say { display: grid; font-family: var(--serif); font-size: 32px; font-weight: 700; }
.say > i { grid-area: 1 / 1; font-style: normal; opacity: 0; animation: 12s infinite steps(1, end); }
.say > .s0 { animation-name: p-s0; } .say > .s1 { animation-name: p-s1; } .say > .s2 { animation-name: p-s2; }
.say > .s3 { animation-name: p-s3; } .say > .s4 { animation-name: p-s4; }
@keyframes p-s0 { 0% { opacity: 1; } 8.33% { opacity: 0; } 100% { opacity: 0; } }
@keyframes p-s1 { 0% { opacity: 0; } 8.33% { opacity: 1; } 29.17% { opacity: 0; } 100% { opacity: 0; } }
@keyframes p-s2 { 0% { opacity: 0; } 29.17% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes p-s3 { 0% { opacity: 0; } 50% { opacity: 1; } 70.83% { opacity: 0; } 100% { opacity: 0; } }
@keyframes p-s4 { 0% { opacity: 0; } 70.83% { opacity: 1; } 100% { opacity: 1; } }
.grafik { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--koyu-cizgi); }
.grafik span { flex: 1; background: var(--koyu-cizgi2); border-radius: 3px 3px 0 0; height: var(--h); }
.grafik span.su { background: var(--canli-yesil); transform-origin: bottom; animation: p-cubuk 12s infinite steps(1, end); }
@keyframes p-cubuk { 0% { transform: scaleY(.3); } 8.33% { transform: scaleY(.45); } 29.17% { transform: scaleY(.6); } 50% { transform: scaleY(.78); } 70.83% { transform: scaleY(1); } }
.grafik-alt { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--koyu-soluk); margin-top: 6px; }

/* ---- Nasil calisir: dort adim sirayla (12 sn, adim basina 3 sn) ---- */
.na-sahne { display: grid; grid-template-columns: 1fr 1.15fr; gap: 54px; margin-top: 42px; align-items: center; }
.adimlar { list-style: none; }
.adimlar li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--koyu-cizgi); color: var(--koyu-soluk); animation: n-adim 12s infinite steps(1, end); animation-delay: var(--g); }
.adimlar li:first-child { border-top: 1px solid var(--koyu-cizgi); }
.adimlar .n { font-family: var(--serif); font-size: 22px; font-weight: 700; min-width: 22px; }
.adimlar b { display: block; font-size: 17px; }
.adimlar p { font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
@keyframes n-adim { 0% { color: var(--koyu-metin); } 25% { color: var(--koyu-soluk); } 100% { color: var(--koyu-soluk); } }
.evreler { position: relative; height: 430px; background: var(--koyu-yuzey); border: 1px solid var(--koyu-cizgi); border-radius: 14px; overflow: hidden; }
.evre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: n-evre 12s infinite; animation-delay: var(--g); }
@keyframes n-evre { 0% { opacity: 0; } 2%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
.evre .etiket { position: absolute; left: 20px; top: 16px; font-size: 12.5px; letter-spacing: .08em; color: var(--koyu-soluk); font-weight: 700; }
.st-foto { animation: n-dus 12s infinite; animation-delay: var(--g); }
.st-foto img { height: 320px; width: auto; }
.st-foto.kucuk { animation: none; }
.st-foto.kucuk img { height: 230px; }
@keyframes n-dus { 0% { transform: translateY(-60px); opacity: 0; } 6%, 100% { transform: none; opacity: 1; } }
.yaklas { display: flex; align-items: center; gap: 30px; }
.yaklas .mini { width: 120px; height: 210px; border: 6px solid var(--tel-cerceve); border-radius: 22px; background: var(--tel-ekran); animation: n-yaklas 12s infinite; animation-delay: var(--g); }
@keyframes n-yaklas { 0% { transform: translateX(-40px) rotate(-8deg); } 10%, 100% { transform: translateX(10px) rotate(0); } }
.evre .tel { transform: scale(.78); }
.evre .pnl { width: 86%; }
.evre .hk.yeni { background: var(--koyu-yuzey2); animation: n-kay 12s infinite; animation-delay: var(--g); }
@keyframes n-kay { 0%, 4% { opacity: 0; transform: translateX(26px); } 8%, 100% { opacity: 1; transform: none; } }

/* ---- Referanslar: suzgec ---- */
.suz { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; }
.suz a { padding: 9px 16px; border: 1px solid var(--cizgi); border-radius: 999px; font-size: 14px; color: var(--soluk); }
.suz a[aria-pressed="true"] { background: var(--metin); color: var(--zemin); border-color: var(--metin); font-weight: 700; }
.bos { margin-top: 30px; color: var(--soluk); font-size: 15px; }

/* ---- Iletisim ---- */
.ilt { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.ilt > div { background: var(--zemin); padding: 30px 28px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.form label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.form .tam { grid-column: 1 / -1; }
.form input, .form textarea { width: 100%; border: 1px solid var(--cizgi); border-radius: 2px; background: var(--zemin); padding: 12px 14px; font-size: 15px; }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--vurgu); }
.form .b1 { justify-self: start; }
.form .durum { grid-column: 1 / -1; font-size: 15px; }
.form .durum.tamam { color: var(--vurgu); font-weight: 700; }
.yol { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--cizgi); }
.yol:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.yol h3 { font-size: 21px; }
.yol p { font-size: 15px; color: var(--soluk); line-height: 1.55; margin-top: 6px; }
.yol .b1 { display: inline-block; margin-top: 14px; padding: 12px 20px; }
.yol .tel-liste { display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 8px 16px; margin-top: 8px; }
.yol .tel-no { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; }
.yol .tel-ara { padding: 8px 18px; font-size: 14px; }

@media (max-width: 900px) {
  .sade { padding: 40px var(--yan) 36px; }
  .ana-sahne, .pl-sahne, .na-sahne { grid-template-columns: 1fr; justify-items: stretch; gap: 32px; }
  .ana-sahne .tel { justify-self: center; }
  .pl-sahne .sip { grid-template-columns: 104px 1fr 76px; }
  .pl-sahne .sip > :nth-child(3) { display: block; }
  .evreler { height: 380px; }
  .ilt, .form { grid-template-columns: 1fr; }
  .ilt > div { padding: 24px 20px; }
}

/* ---- hareket azaltma: dongu durur, SON HALI gorunur ---- */
@media (prefers-reduced-motion: reduce) {
  .sahne .sayfa, .hk.yeni, .sip.gel, .st-foto, .yaklas .mini { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Donan kare isletme sayfasi ve kanal dugmeleri izgarasi: anlatmak
     istedigimiz o. Google degerlendirme ekrani hic gorunmez. */
  .g-ekran { animation: none !important; opacity: 0 !important; }
  .sahne .kd.g, .g-ekran .yildiz svg { animation: none !important; }
  .sayac3 b.art > i { animation: none !important; } .sayac3 b.art > .o1 { opacity: 0; } .sayac3 b.art > .o2 { opacity: 1; }
  .tel .katman, .evre { animation: none !important; opacity: 0 !important; }
  .tel .katman:first-child, .evre:last-child { opacity: 1 !important; }
  .say > i { animation: none !important; opacity: 0; } .say > .s4 { opacity: 1; }
  .grafik span.su { animation: none !important; transform: none; }
  .adimlar li { animation: none !important; color: var(--koyu-metin); }
  .sliste li { animation: none !important; }
  .dalga, [data-hareket-gizle] { display: none !important; }
  .kan { transition: none; }
}

/* ---- dar ekran ---- */
@media (max-width: 1100px) {
  .men { gap: 18px; }
  .ust { gap: 24px; }
  .kgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  :root { --yan: 20px; }
  .ust { flex-wrap: wrap; gap: 12px 20px; padding-top: 16px; padding-bottom: 12px; }
  .men { order: 3; width: 100%; margin-left: 0; overflow-x: auto; gap: 20px; padding-bottom: 4px; scrollbar-width: none; }
  .cta { margin-left: auto; padding: 9px 16px; font-size: 14px; }
  .marka img { height: 26px; }
  .kah { grid-template-columns: 1fr; }
  .kah .sol { padding: 40px var(--yan) 32px; }
  h1 { font-size: 40px; }
  .alt { font-size: 17px; }
  .adim { flex-wrap: wrap; padding: 0; }
  .adim > div { flex: 1 1 50%; border-bottom: 1px solid var(--cizgi); padding: 16px 20px; }
  .adim > div:nth-child(2n) { border-right: 0; }
  section { padding: 52px var(--yan); }
  h2 { font-size: 30px; }
  .sahne { grid-template-columns: 1fr; justify-items: center; gap: 32px; }
  .pnl { width: 100%; }
  .sip { grid-template-columns: 70px 1fr 70px; gap: 10px; padding: 13px 14px; font-size: 14px; }
  .sip > :nth-child(3) { display: none; }
  .sayac3 > div { padding: 14px 12px; }
  .sayac3 b { font-size: 26px; }
  .hk { padding: 13px 14px; font-size: 14px; }
  .izg, .sis, .kanit { grid-template-columns: 1fr 1fr; }
  .ek { flex-direction: column; margin: 0; }
  .olc { --o: 2.6px; gap: 16px 18px; }
  .sek { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--yan)); }
  .sek a { white-space: nowrap; padding: 12px 14px 13px; }
  .kgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  /* yedi baglanti tek satira sigmiyor: 4 + 3 izgara (iki satir; baslik
     yuksekligi alti baglantilik 3 x 2 ile ayni), her biri 44px dokunma hedefi */
  .men { font-size: 13.5px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 10px; overflow: visible; padding-bottom: 0; }
  .men a { min-height: 44px; display: flex; align-items: center; }
  .men a:nth-child(4n) { justify-content: flex-end; }
  .men a:nth-child(4n+2), .men a:nth-child(4n+3) { justify-content: center; }
  h1 { font-size: 36px; }
  .eyl a { flex: 1 1 100%; }
  .izg, .sis, .kanit { grid-template-columns: 1fr; }
  .kart .f { height: 260px; }
  .sayac .n { font-size: 64px; }
  .kgrid { grid-template-columns: repeat(2, 1fr); }
  .wa-kok { right: 16px; bottom: calc(16px + var(--cz-yuk, 0px)); }
  .cz { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .cz .d { margin-left: 0; }
  .cz .d button { flex: 1; }
  footer { padding-bottom: 110px; }
  footer .sag { margin-left: 0; }
}
@media (max-width: 359px) {
  /* numara + Ara tek satira sigmiyor: Ara numaranin altina iner */
  .yol .tel-liste { grid-template-columns: max-content; justify-items: start; }
}