/* Kubio sitesinin görünümü. Kimlik logodan gelir: lacivert zemin, camgöbeği ana renk, mercan vurgu,
   altın puan; köşeler maskot gibi yuvarlak. Önce telefon için yazılır, geniş ekranda açılır. */

:root {
  --zemin: #0B1B2B; --zemin2: #0E2236; --kart: #12263A; --kart2: #173250; --cizgi: #21405F; --cizgi2: #2B5379;
  --yazi: #F4F7FA; --soluk: #9DB0C4; --ana: #22C3E6; --ana2: #7EE8FA; --derin: #0E8FB3;
  --mercan: #FF4D5E; --altin: #FFCF3F; --yesil: #4ADE80; --mor: #9D92FF;
  --govde: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --baslik: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --yari: 16px; --golge: 0 12px 34px rgba(0, 0, 0, .3);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 400 17px/1.6 var(--govde); min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: anywhere; }
main { flex: 1; }
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; display: block; border-radius: 14px; }
video { width: 100%; background: #000; aspect-ratio: 16 / 9; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--ana2); text-underline-offset: 3px; }
a:hover { color: #fff; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .93em; color: var(--ana2); background: rgba(34, 195, 230, .1); padding: .1em .4em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: 14px 0; }
small { font-size: .85em; }
s { color: var(--soluk); }
::selection { background: rgba(34, 195, 230, .35); }
:focus-visible { outline: 3px solid rgba(126, 232, 250, .7); outline-offset: 2px; border-radius: 6px; }

.sar { width: min(1180px, 100% - 36px); margin-inline: auto; }
.sar.dar { width: min(840px, 100% - 36px); }
.sar.cok-dar { width: min(470px, 100% - 36px); }
.orta { text-align: center; }
.soluk { color: var(--soluk); }
.kucuk-yazi { font-size: .88rem; }
.ust-bosluk { margin-top: 26px; }
.gizli-yazi, .bal { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eksik { color: var(--altin); }
.atla { position: absolute; left: -999px; top: 8px; background: var(--ana); color: #06202E; padding: 8px 14px; border-radius: 10px; z-index: 50; font-weight: 800; }
.atla:focus { left: 12px; }
.ekmek { color: var(--soluk); font-size: .92rem; margin-bottom: 10px; }
.ust-yazi { font: 700 .82rem/1 var(--govde); letter-spacing: .14em; text-transform: uppercase; color: var(--ana2); margin-bottom: 14px; }
.giris { font-size: 1.15rem; color: #D5E1EC; }

/* ---------- düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 800 1rem/1.2 var(--govde); color: var(--yazi); background: #1C3A59; border: 2px solid var(--cizgi2); border-radius: 12px; padding: 10px 18px; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .06s; }
.btn:hover { background: #25507A; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ana { background: var(--ana); border-color: var(--ana); color: #06202E; }
.btn.ana:hover { background: var(--ana2); border-color: var(--ana2); color: #06202E; }
.btn.altin { background: var(--altin); border-color: var(--altin); color: #2A2000; }
.btn.altin:hover { background: #FFDD6E; border-color: #FFDD6E; color: #2A2000; }
.btn.cizgi { background: transparent; border-color: var(--ana); color: var(--ana2); }
.btn.cizgi:hover { background: rgba(34, 195, 230, .16); color: #fff; }
.btn.tehlike { background: var(--mercan); border-color: var(--mercan); color: #fff; }
.btn.tehlike:hover { background: #FF6B79; border-color: #FF6B79; }
.btn.buyuk { font-size: 1.1rem; padding: 14px 26px; border-radius: 14px; }
.btn.kucuk { font-size: .88rem; padding: 6px 12px; border-radius: 10px; }
.bag { background: none; border: 0; padding: 0; font: inherit; color: var(--ana2); text-decoration: underline; cursor: pointer; }
.satirici { display: inline; margin: 0; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 1em; }
.islemler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- üst şerit ---------- */
.duyuru { background: linear-gradient(90deg, var(--derin), #1668A8); color: #fff; text-align: center; font-weight: 700; font-size: .95rem; padding: 8px 16px; }
.ust { position: sticky; top: 0; z-index: 20; background: rgba(11, 27, 43, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 14px; min-height: 66px; flex-wrap: wrap; }
.marka { display: inline-flex; text-decoration: none; color: var(--yazi); }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.marka-yazi { color: var(--yazi); }
.menu-kutu { position: absolute; opacity: 0; pointer-events: none; }
.menu-dugme { margin-left: auto; width: 46px; height: 42px; border: 2px solid var(--cizgi2); border-radius: 12px; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 11px; cursor: pointer; }
.menu-dugme span { height: 2.5px; background: var(--yazi); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-kutu:focus-visible + .menu-dugme { outline: 3px solid rgba(126, 232, 250, .7); }
.menu-kutu:checked + .menu-dugme span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-kutu:checked + .menu-dugme span:nth-child(2) { opacity: 0; }
.menu-kutu:checked + .menu-dugme span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu { display: none; flex-direction: column; gap: 4px; width: 100%; padding: 6px 0 16px; }
.menu-kutu:checked ~ .menu { display: flex; }
.menu a:not(.btn) { color: var(--yazi); text-decoration: none; font-weight: 700; padding: 10px 12px; border-radius: 10px; }
.menu a:not(.btn):hover, .menu a.etkin { background: rgba(34, 195, 230, .14); color: var(--ana2); }
.menu .yonetim-bag { color: var(--altin) !important; }
.menu .btn, .menu .satirici { align-self: flex-start; margin: 4px 0 0 12px; }
.bosluk { flex: 1; }
@media (min-width: 900px) {
  .menu-dugme { display: none; }
  .menu { display: flex; flex-direction: row; align-items: center; width: auto; flex: 1; padding: 0; margin-left: 18px; }
  .menu .btn, .menu .satirici { align-self: center; margin: 0 0 0 6px; }
}

/* ---------- bölümler ---------- */
.bolum { padding: clamp(36px, 6vw, 72px) 0; }
.bolum.koyu { background: var(--zemin2); border-block: 1px solid rgba(33, 64, 95, .6); }
.bolum-baslik, .sayfa-baslik { text-align: center; }
.sayfa-baslik { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.bolum-alt { text-align: center; color: var(--soluk); max-width: 640px; margin: -4px auto 28px; }
.bolum-baslik + .izgara, .bolum-baslik + .adimlar, .bolum-baslik + .sss, .bolum-baslik + .galeri { margin-top: 26px; }
.izgara { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .izgara.iki, .izgara.dort, .izgara.uc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .izgara.uc { grid-template-columns: repeat(3, 1fr); } .izgara.dort { grid-template-columns: repeat(4, 1fr); } }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 22px; box-shadow: var(--golge); }
.kart > :last-child { margin-bottom: 0; }
.hesap-ana > .kart, .y-ana > .kart, .y-ana > .izgara, .hesap-ana > .izgara, .y-ana > form.kart, .sar.dar > .kart, .sar.dar > form.kart { margin-bottom: 18px; }
.kart.tehlike { border-color: rgba(255, 77, 94, .45); }

/* ---------- ana sayfa: kahraman ---------- */
.kahraman { position: relative; overflow: hidden; padding: clamp(34px, 6vw, 80px) 0 clamp(40px, 6vw, 84px); background: radial-gradient(900px 520px at 85% -10%, rgba(34, 195, 230, .22), transparent 65%), radial-gradient(700px 480px at -10% 110%, rgba(255, 77, 94, .13), transparent 60%), var(--zemin); }
.kahraman.kucuk { padding-bottom: clamp(26px, 4vw, 50px); }
.kahraman-ic { display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) { .kahraman-ic { grid-template-columns: 1.02fr 1fr; gap: 50px; } }
.kahraman h1 { background: linear-gradient(180deg, #fff 30%, var(--ana2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kisa-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0; color: #D5E1EC; font-weight: 700; font-size: .95rem; }
.kisa-liste li::before { content: "✓"; color: var(--yesil); margin-right: 7px; font-weight: 900; }
.ozel-maskot { position: relative; justify-self: center; }
.maskot.salla { animation: salin 4.5s ease-in-out infinite; }
.maskot .goz { transform-origin: 100px 111px; animation: kirp 5.5s infinite; }
@keyframes salin { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes kirp { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
.kivilcim { position: absolute; width: 16px; height: 16px; background: var(--altin); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: parla 2.6s ease-in-out infinite; }
.kivilcim.k1 { top: 6%; left: 8%; } .kivilcim.k2 { top: 18%; right: 4%; width: 22px; height: 22px; animation-delay: .8s; background: var(--ana2); } .kivilcim.k3 { bottom: 10%; left: 0; animation-delay: 1.5s; background: var(--mercan); }
@keyframes parla { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }

/* canlandırma */
.demo { background: #07131F; border: 2px solid var(--cizgi2); border-radius: 22px; padding: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 6px rgba(34, 195, 230, .07); }
.demo-ust { display: flex; align-items: center; gap: 10px; padding: 2px 6px 10px; font-size: .88rem; font-weight: 700; }
.canli { background: var(--mercan); color: #fff; font-size: .72rem; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; }
.demo-ust .izleyici { margin-left: auto; color: var(--soluk); }
.demo-sahne { position: relative; border-radius: 14px; overflow: hidden; background: #0E2236; }
.demo-sahne canvas { display: block; width: 100%; height: auto; }
.demo-sohbet { position: absolute; left: 10px; bottom: 10px; width: min(54%, 260px); display: flex; flex-direction: column; gap: 4px; pointer-events: none; font-size: .8rem; line-height: 1.3; }
.demo-sohbet div { background: rgba(7, 19, 31, .72); border-radius: 9px; padding: 4px 9px; width: fit-content; max-width: 100%; animation: belir .25s ease-out; }
.demo-sohbet b { color: var(--ana2); } .demo-sohbet .h { color: var(--altin); }
@keyframes belir { from { opacity: 0; transform: translateY(8px); } }
.demo-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 4px; }
.demo-not { color: var(--soluk); font-size: .82rem; margin: 6px 6px 2px; }

/* ---------- adımlar, listeler ---------- */
.adimlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: a; }
@media (min-width: 760px) { .adimlar { grid-template-columns: repeat(3, 1fr); } .adimlar.bes { grid-template-columns: repeat(5, 1fr); } }
.adimlar li { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 22px; position: relative; }
.adimlar li > b { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--ana); color: #06202E; font: 700 1.3rem var(--baslik); margin-bottom: 12px; }
.adimlar li p { color: var(--soluk); margin: 0; }
.tik-liste, .duz-liste { list-style: none; padding: 0; margin: 0 0 1em; }
.tik-liste li { padding: 5px 0 5px 30px; position: relative; }
.tik-liste li::before { content: ""; position: absolute; left: 0; top: .65em; width: 18px; height: 18px; border-radius: 6px; background: var(--ana) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.3l3 3 6-6.4' fill='none' stroke='%2306202E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; }
.duz-liste li { padding: 6px 0; border-bottom: 1px solid rgba(33, 64, 95, .6); }
.duz-liste li:last-child { border-bottom: 0; }
.duz-liste.yan li { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.duz-liste.yan li > b { color: var(--soluk); font-weight: 700; }
.sayili { padding-left: 1.4em; margin: 0 0 1em; } .sayili li { padding: 4px 0 4px 4px; } .sayili li::marker { color: var(--ana2); font-weight: 800; }
.asamalar { list-style: none; display: flex; padding: 0; margin: 18px 0; gap: 4px; counter-reset: s; }
.asamalar li { flex: 1; text-align: center; font-size: .78rem; font-weight: 700; color: var(--soluk); position: relative; padding-top: 30px; }
.asamalar li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--zemin); border: 2px solid var(--cizgi2); font-size: .75rem; line-height: 20px; z-index: 1; }
.asamalar li::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--cizgi2); }
.asamalar li:first-child::after { display: none; }
.asamalar li.tamam { color: var(--yazi); } .asamalar li.tamam::before { background: var(--ana); border-color: var(--ana); color: #06202E; content: "✓"; } .asamalar li.tamam::after { background: var(--ana); }

/* ---------- vitrin, ürün kartları ---------- */
.vitrin { display: grid; gap: 30px; align-items: center; }
@media (min-width: 940px) { .vitrin { grid-template-columns: 1.1fr 1fr; gap: 46px; } .urun-ust .vitrin { grid-template-columns: 1fr 1.1fr; } }
.vitrin-medya video, .vitrin-medya img { border: 2px solid var(--cizgi2); box-shadow: var(--golge); }
.vitrin-medya p { margin: 8px 0 0; }
.vitrin-fiyat { font-size: 1.05rem; color: #D5E1EC; } .vitrin-fiyat b { font: 600 1.9rem var(--baslik); color: var(--altin); }
.urun { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--yazi); text-decoration: none; transition: transform .15s, border-color .15s; }
.urun:hover { transform: translateY(-4px); border-color: var(--ana); color: var(--yazi); }
.urun-gorsel { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #16324D, #0B1B2B); display: grid; place-items: center; position: relative; overflow: hidden; }
.urun-gorsel img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ozel-gorsel { background: radial-gradient(circle at 50% 60%, rgba(255, 207, 63, .28), transparent 65%), linear-gradient(135deg, #2A2350, #0B1B2B); }
.soru-gorsel { background: radial-gradient(circle at 50% 55%, rgba(34, 195, 230, .3), transparent 65%), linear-gradient(135deg, #123A55, #0B1B2B); }
.soru-gorsel span { font: 700 5rem var(--baslik); color: var(--ana2); text-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.urun-ic { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.urun-ic .rozet, .vitrin-yazi .rozet { align-self: flex-start; }
.urun-ic h3 { margin: 6px 0 0; font-size: 1.3rem; } .urun-ic p { color: var(--soluk); margin: 0; flex: 1; }
.fiyat-satir { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .fiyat-satir b { font: 600 1.35rem var(--baslik); color: var(--altin); } .fiyat-satir small { color: var(--soluk); } .fiyat-satir .btn { margin-left: auto; align-self: center; }
.fark .simge { width: 40px; height: 40px; color: var(--ana2); background: rgba(34, 195, 230, .12); border-radius: 12px; padding: 8px; margin-bottom: 12px; }
.fark p, .ozellik p { color: var(--soluk); margin: 0; }
.ozel-serit { display: grid; gap: 24px; align-items: center; background: linear-gradient(120deg, #2A2350, #173250); border: 1px solid #45408A; border-radius: 24px; padding: clamp(22px, 4vw, 44px); justify-items: center; text-align: center; }
@media (min-width: 760px) { .ozel-serit { grid-template-columns: auto 1fr; text-align: left; justify-items: start; } }
.bilgi-serit { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 24px; } .bilgi-serit p { margin: 0; color: var(--soluk); } .bilgi-serit h3 { margin-bottom: 4px; }
.fikir-ozet { color: var(--yazi); text-decoration: none; position: relative; padding-top: 30px; } .fikir-ozet p { color: var(--soluk); }
.sira-no { position: absolute; top: -14px; left: 20px; width: 38px; height: 38px; border-radius: 12px; background: var(--altin); color: #2A2000; font: 700 1.2rem/38px var(--baslik); text-align: center; }
.oy-sayi { font-weight: 800; color: var(--ana2); }
.galeri { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.galeri figure { margin: 0; } .galeri img { border: 2px solid var(--cizgi); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: border-color .15s; } .galeri a:hover img { border-color: var(--ana); }
.galeri figcaption { color: var(--soluk); font-size: .9rem; margin-top: 6px; text-align: center; }
.son-cagri { text-align: center; margin-top: 44px; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: radial-gradient(500px 200px at 50% 0, rgba(34, 195, 230, .25), transparent 70%), var(--kart); border: 1px solid var(--cizgi2); } .son-cagri .dugmeler { justify-content: center; margin: 0; }
.zaman-cizgisi { display: grid; gap: 14px; }

/* ---------- fiyatlar ---------- */
.fiyatlar { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); align-items: stretch; margin-top: 30px; }
.fiyat-karti { text-align: center; display: flex; flex-direction: column; gap: 4px; position: relative; padding-top: 30px; }
.fiyat-karti .tutar { margin: 6px 0 0; } .fiyat-karti .tutar b { font: 600 2rem var(--baslik); }
.fiyat-karti .alt-tutar { color: var(--soluk); font-size: .9rem; flex: 1; min-height: 2.9em; }
.fiyat-karti.one-cikan { border: 2px solid var(--ana); background: linear-gradient(180deg, #16395A, var(--kart)); }
.fiyat-karti.omur .tutar b { color: var(--altin); }
.serit { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ana); color: #06202E; font-size: .75rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.teklif .tutar b { font: 600 2rem var(--baslik); color: var(--altin); }
.hesap-sonuc { background: var(--zemin); border: 1px dashed var(--cizgi2); border-radius: 12px; padding: 12px 14px; margin: 0; font-weight: 700; }
.hesap-sonuc b { color: var(--altin); }

/* ---------- formlar ---------- */
.form { display: grid; gap: 16px; }
.form > .btn, .form > fieldset > .btn { justify-self: start; }
.form.yatay { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .form.yatay input, .form.yatay select { flex: 1 1 200px; width: auto; }
.form.ara { margin: 0 0 18px; }
.form .izgara { gap: 16px; }
.alan { display: grid; gap: 6px; align-content: start; }
label, .etiket-bos { font-weight: 800; font-size: .95rem; }
label small { font-weight: 400; color: var(--soluk); }
input, select, textarea { width: 100%; font: inherit; color: var(--yazi); background: var(--zemin); border: 2px solid var(--cizgi2); border-radius: 12px; padding: 11px 14px; }
input.kisa { width: 90px; }
textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #6F859B; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 4px rgba(34, 195, 230, .2); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--ana); flex: none; margin: 2px 0 0; padding: 0; }
input[readonly], textarea[readonly] { background: #0A1622; color: var(--ana2); font-family: Consolas, monospace; font-size: .9rem; }
.kod-giris { font-family: Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.buyuk-harf { text-transform: uppercase; }
.ipucu { color: var(--soluk); font-size: .88rem; margin: 0; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; cursor: pointer; }
fieldset { border: 1px solid var(--cizgi); margin: 0; min-width: 0; } fieldset.kart { padding: 22px; display: grid; gap: 16px; }
legend { font: 600 1.2rem var(--baslik); padding: 0 8px; }
.secenekler { display: grid; gap: 10px; }
.secenek { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--cizgi2); border-radius: 14px; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.secenek:hover { border-color: var(--ana); } .secenek:has(input:checked) { border-color: var(--ana); background: rgba(34, 195, 230, .1); }
.secenek-ic { flex: 1; display: grid; } .secenek-ic b { font-size: 1.05rem; } .secenek-ic small { color: var(--soluk); }
.secenek-fiyat { font: 600 1.15rem var(--baslik); color: var(--altin); white-space: nowrap; text-align: right; } .secenek-fiyat s { font-size: .8em; }
.siparis-toplam { font-size: 1.15rem; margin: 0; } .siparis-toplam b { font: 600 1.7rem var(--baslik); color: var(--altin); }
.form-kart { text-align: center; padding: 30px 26px; } .form-kart .form { text-align: left; margin-top: 18px; } .form-kart h1 { font-size: 1.9rem; margin-top: 8px; } .form-kart .btn.buyuk { width: 100%; }
.cok-dar > p.orta { margin-top: 18px; }

/* ---------- iletiler, rozetler ---------- */
.flaslar { margin-top: 18px; display: grid; gap: 10px; }
.uyari { border-radius: 12px; padding: 12px 16px; border: 1px solid; font-weight: 700; margin: 0 0 16px; }
.flaslar .uyari { margin: 0; }
.uyari.tamam { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .5); color: #B9F5CF; }
.uyari.hata { background: rgba(255, 77, 94, .12); border-color: rgba(255, 77, 94, .55); color: #FFC2C8; }
.uyari.bilgi { background: rgba(34, 195, 230, .1); border-color: rgba(34, 195, 230, .45); color: #CFF3FB; }
.uyari.sari { background: rgba(255, 207, 63, .1); border-color: rgba(255, 207, 63, .5); color: #FFE9A6; }
.rozet { display: inline-block; font: 800 .74rem/1 var(--govde); letter-spacing: .03em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.rozet.yesil { background: rgba(74, 222, 128, .16); color: #7CF0A6; } .rozet.sari { background: rgba(255, 207, 63, .16); color: var(--altin); } .rozet.mavi { background: rgba(34, 195, 230, .16); color: var(--ana2); }
.rozet.gri { background: rgba(143, 163, 184, .16); color: var(--soluk); } .rozet.mor { background: rgba(157, 146, 255, .18); color: #C5BEFF; } .rozet.kirmizi { background: rgba(255, 77, 94, .16); color: #FF9AA4; }

/* ---------- sık sorulanlar ---------- */
.sss { display: grid; gap: 10px; margin-bottom: 26px; }
.sss details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; }
.sss summary { cursor: pointer; font-weight: 800; padding: 16px 48px 16px 18px; list-style: none; position: relative; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 1.5rem var(--baslik); color: var(--ana2); }
.sss details[open] summary::after { content: "–"; }
.sss summary:hover { background: rgba(34, 195, 230, .07); }
.sss details > div { padding: 0 18px 16px; color: #D5E1EC; }

/* ---------- alt bilgi ---------- */
.alt { background: #07131F; border-top: 1px solid var(--cizgi); padding: 44px 0 0; margin-top: 30px; font-size: .95rem; }
.alt-izgara { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .alt-izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .alt-izgara { grid-template-columns: 1.6fr 1fr 1fr; } }
.alt h3 { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); font-family: var(--govde); font-weight: 800; }
.alt-izgara a:not(.marka) { display: block; color: #D5E1EC; text-decoration: none; padding: 4px 0; } .alt-izgara a:not(.marka):hover { color: var(--ana2); }
.alt .sosyal a { display: inline !important; }
.alt-son { border-top: 1px solid var(--cizgi); margin-top: 30px; padding: 18px 0 24px; color: #7F95AB; font-size: .82rem; } .alt-son p { margin: 0; }

/* ---------- hata sayfası ---------- */
.hata-kutu { text-align: center; padding: 20px 0; } .hata-kod { font: 700 4.5rem/1 var(--baslik); color: var(--cizgi2); margin: 0; } .hata-kutu .btn { margin-top: 10px; }
.maskot.saskin { animation: salin 3s ease-in-out infinite; }

/* ---------- üye hesabı ---------- */
.hesap-sayfa .bolum { padding-top: 28px; }
.hesap-kabuk { display: grid; gap: 22px; align-items: start; }
@media (min-width: 940px) { .hesap-kabuk { grid-template-columns: 250px 1fr; gap: 30px; } .hesap-menu { position: sticky; top: 86px; } }
.hesap-menu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 12px; display: flex; gap: 4px; overflow-x: auto; }
@media (min-width: 940px) { .hesap-menu { flex-direction: column; overflow: visible; } }
.hesap-kim { display: none; align-items: center; gap: 10px; padding: 8px 10px 14px; margin: 0 0 6px; border-bottom: 1px solid var(--cizgi); } .hesap-kim span { display: grid; min-width: 0; } .hesap-kim small { color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 940px) { .hesap-kim { display: flex; } }
.hesap-menu a { color: var(--yazi); text-decoration: none; font-weight: 700; padding: 9px 12px; border-radius: 10px; white-space: nowrap; font-size: .95rem; }
.hesap-menu a:hover { background: rgba(34, 195, 230, .1); } .hesap-menu a.etkin { background: var(--ana); color: #06202E; }
.hesap-ana { min-width: 0; } .hesap-ana > h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 18px; } .hesap-ana > h2 { margin-top: 26px; }
.sayilar { margin-bottom: 18px; }
.sayi-karti { display: grid; gap: 2px; text-decoration: none; color: var(--yazi); padding: 18px 20px; } .sayi-karti b { font: 600 2rem/1.1 var(--baslik); color: var(--ana2); } .sayi-karti span { color: #D5E1EC; font-weight: 700; font-size: .92rem; } .sayi-karti small { color: var(--soluk); }
a.sayi-karti:hover { border-color: var(--ana); color: var(--yazi); }
.satir-kart { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none; color: var(--yazi); margin-bottom: 10px; flex-wrap: wrap; } .satir-kart:hover { border-color: var(--ana); color: var(--yazi); }
.satir-kart > span:first-child { display: grid; } .satir-kart small { color: var(--soluk); }
.bos-kutu { text-align: center; padding: 34px 22px; margin-bottom: 18px; }
.lisans-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .lisans-ust h2 { margin: 0; }
.lisans.bitti, .lisans.iptal { opacity: .8; } .lisans.azaldi { border-color: rgba(255, 207, 63, .55); }
.anahtar { display: grid; gap: 8px; margin: 14px 0; } .anahtar .btn { justify-self: start; }
.yazisma { display: grid; gap: 12px; margin-bottom: 20px; }
.ileti { max-width: 88%; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 16px 16px 16px 4px; padding: 12px 16px; justify-self: start; }
.ileti.ben { justify-self: end; border-radius: 16px 16px 4px 16px; background: #143A55; border-color: var(--cizgi2); }
.ileti.kubio:not(.ben) { border-color: rgba(34, 195, 230, .45); }
.ileti .kim { font-weight: 800; font-size: .85rem; color: var(--ana2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .ileti time { color: var(--soluk); font-weight: 400; }
.sonuc { margin-top: 18px; } .sonuc.iyi { border-color: rgba(74, 222, 128, .6); } .sonuc.kotu { border-color: rgba(255, 77, 94, .6); }

/* ---------- oylama ---------- */
.fikir { display: flex; gap: 18px; align-items: stretch; margin-bottom: 12px; padding: 18px; } .fikir.oylandi { border-color: var(--ana); }
.fikir-oy form { height: 100%; }
.oy-dugme { width: 84px; height: 100%; min-height: 92px; display: grid; place-items: center; align-content: center; gap: 0; background: var(--zemin); border: 2px solid var(--cizgi2); border-radius: 14px; color: var(--yazi); cursor: pointer; font-family: var(--govde); text-decoration: none; padding: 8px 4px; transition: border-color .15s, background .15s; }
.oy-dugme b { font: 600 1.5rem/1.1 var(--baslik); } .oy-dugme span { font-size: .72rem; color: var(--soluk); font-weight: 700; }
button.oy-dugme:hover, a.oy-dugme:hover { border-color: var(--ana); color: var(--ana2); } .oy-dugme.verildi { background: var(--ana); border-color: var(--ana); color: #06202E; } .oy-dugme.verildi span { color: #06202E; } .oy-dugme.sabit { cursor: default; }
.fikir-ic { flex: 1; min-width: 0; } .fikir-ic p { color: var(--soluk); margin-bottom: 10px; } .fikir-ic h3 { margin-bottom: 4px; }
.cubuk { height: 8px; background: var(--zemin); border-radius: 999px; overflow: hidden; } .cubuk i { display: block; height: 100%; background: linear-gradient(90deg, var(--derin), var(--ana2)); border-radius: 999px; min-width: 4px; }

/* ---------- sözleşmeler ---------- */
.yasal h2 { margin-top: 1.6em; } .yasal h3 { margin-top: 1.2em; } .yasal .sayfa-baslik { text-align: left; } .yasal ul { padding-left: 1.2em; } .yasal ul.duz-liste { padding: 0; }

/* ---------- yönetim paneli ---------- */
body.yonetim { background: #081524; }
.y-kabuk { display: grid; min-height: 100vh; grid-template-columns: 1fr; width: 100%; }
.y-yan { background: var(--zemin); border-bottom: 1px solid var(--cizgi); padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 10; }
.y-etiket { margin: 0; font: 800 .72rem var(--govde); letter-spacing: .12em; text-transform: uppercase; color: var(--altin); }
.y-yan nav { display: none; flex-direction: column; gap: 2px; width: 100%; } .y-yan .menu-kutu:checked ~ nav { display: flex; }
.y-yan nav a { color: var(--yazi); text-decoration: none; font-weight: 700; font-size: .95rem; padding: 9px 12px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.y-yan nav a:hover { background: rgba(34, 195, 230, .1); } .y-yan nav a.etkin { background: var(--ana); color: #06202E; }
.y-yan nav .satirici { margin: 8px 0 0 12px; }
.sayi { background: var(--mercan); color: #fff; border-radius: 999px; font-size: .75rem; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 7px; }
.y-ana { padding: 22px 18px 60px; min-width: 0; max-width: 1280px; width: 100%; } .y-ana > h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 18px; }
@media (min-width: 1000px) {
  .y-kabuk { grid-template-columns: 260px 1fr; }
  .y-yan { flex-direction: column; align-items: stretch; flex-wrap: nowrap; border-bottom: 0; border-right: 1px solid var(--cizgi); height: 100vh; position: sticky; top: 0; align-self: start; overflow-y: auto; padding: 20px 14px; gap: 4px; }
  .y-yan .menu-dugme { display: none; } .y-yan nav { display: flex; margin-top: 14px; } .y-etiket { padding-left: 4px; }
  .y-ana { padding: 30px 34px 70px; }
}
.suzgec { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.suzgec a { text-decoration: none; color: var(--yazi); font-weight: 700; font-size: .9rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--cizgi2); background: var(--kart); } .suzgec a b { color: var(--soluk); margin-left: 3px; }
.suzgec a.etkin { background: var(--ana); border-color: var(--ana); color: #06202E; } .suzgec a.etkin b { color: #06202E; }
.tablo-sar { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); margin-bottom: 18px; } .kart .tablo-sar { border: 0; background: none; margin-inline: -8px; }
.tablo { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tablo th { text-align: left; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); padding: 12px 14px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 12px 14px; border-bottom: 1px solid rgba(33, 64, 95, .55); vertical-align: top; } .tablo tr:last-child td { border-bottom: 0; } .tablo tbody tr:hover { background: rgba(34, 195, 230, .05); }
.tablo td .form.yatay { flex-wrap: nowrap; } .tablo td select { padding: 6px 10px; min-width: 140px; }
p.bos { background: var(--kart); border: 1px dashed var(--cizgi2); border-radius: 14px; padding: 26px; text-align: center; }
.is-listesi { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.is-listesi a { display: block; background: rgba(255, 207, 63, .08); border: 1px solid rgba(255, 207, 63, .4); border-radius: 12px; padding: 10px 14px; color: var(--yazi); text-decoration: none; font-weight: 700; } .is-listesi a b { color: var(--altin); font: 600 1.15rem var(--baslik); margin-right: 4px; } .is-listesi a:hover { background: rgba(255, 207, 63, .16); }
.sutunlar { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 22px; margin-bottom: 8px; }
.sutun { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.sutun i { display: block; width: 100%; max-width: 54px; min-height: 3px; background: linear-gradient(180deg, var(--ana2), var(--derin)); border-radius: 8px 8px 3px 3px; }
.sutun .deger { font-size: .74rem; font-weight: 800; color: var(--ana2); white-space: nowrap; } .sutun .ad { font-size: .8rem; color: var(--soluk); }
.kontrol { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.kontrol li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--zemin); border: 1px solid var(--cizgi); } .kontrol li > span:nth-child(2) { flex: 1; display: grid; } .kontrol small { color: var(--soluk); }
.isaret { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; flex: none; } .kontrol .tamam .isaret { background: var(--yesil); color: #06321A; } .kontrol .eksik .isaret { background: var(--altin); color: #2A2000; }
.fikir-onay { display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--cizgi); } .fikir-onay:last-child { border-bottom: 0; } .fikir-onay p { margin: 2px 0; color: #D5E1EC; }
.posta-govde { white-space: pre-wrap; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px; font: .9rem/1.5 Consolas, monospace; overflow-x: auto; }

/* ---------- hediye şablonu stüdyosu ---------- */
.sayfa-baslik.sola { text-align: left; }
.studyo-ust { padding: 30px 0 18px; } .studyo-ust .giris { max-width: 760px; margin: 0; }
.studyo-bolum { padding-bottom: 30px; }
.studyo { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1020px) { .studyo { grid-template-columns: minmax(0, 1fr) 450px; } .studyo-onizleme { position: sticky; top: 82px; } }
.studyo-onizleme, .studyo-panel { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yari); box-shadow: var(--golge); min-width: 0; }
.studyo-onizleme { padding: 14px; }
.onizleme-arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.onizleme-arac select { width: auto; padding: 7px 10px; font-size: .88rem; border-radius: 10px; flex: 1 1 170px; max-width: 260px; }
.onay.kucuk { font-size: .85rem; align-items: center; gap: 7px; } .onay.kucuk input { width: 18px; height: 18px; margin: 0; }
.onizleme-sar { display: grid; place-items: center; background: #07131F; border-radius: 12px; padding: 12px; }
#sTuval { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: 10px; touch-action: none; cursor: grab; box-shadow: 0 0 0 2px var(--cizgi2); }
#sTuval:active { cursor: grabbing; } #sTuval:focus-visible { outline: 3px solid rgba(126, 232, 250, .7); outline-offset: 3px; }
.studyo-onizleme .ipucu { margin-top: 10px; }
.sekmeler { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--cizgi); }
.sekmeler button { font: 800 .86rem var(--govde); color: var(--soluk); background: none; border: 0; border-bottom: 3px solid transparent; padding: 14px 4px 11px; cursor: pointer; }
.sekmeler button:hover { color: var(--yazi); } .sekmeler button[aria-selected=true] { color: var(--ana2); border-bottom-color: var(--ana); }
.sekme { padding: 18px; display: grid; gap: 14px; } .sekme[hidden] { display: none; }
.sekme h3 { font-size: 1rem; margin: 6px 0 -4px; color: var(--ana2); } .sekme p { margin: 0; } .sekme .dugmeler { margin: 0; gap: 8px; }
.hazir-dugmeler, .ekle-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.satir-listesi { display: grid; gap: 8px; }
.satir { display: grid; grid-template-columns: auto 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px; padding: 8px 10px; }
.satir.tasiniyor { opacity: .45; } .satir img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.tutamak { color: var(--soluk); cursor: grab; font-size: 1.1rem; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; }
.tur-simge { width: 44px; height: 44px; border-radius: 50%; background: var(--ana); color: #06202E; display: grid; place-items: center; font: 700 1.2rem var(--baslik); }
.satir-alan { display: grid; gap: 4px; min-width: 0; } .satir-alan input { padding: 5px 9px; font-size: .9rem; border-width: 1px; border-radius: 8px; } .satir-alan small { font-size: .76rem; }
.satir-dugme { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.kare-dugme { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--cizgi2); background: #1C3A59; color: var(--yazi); cursor: pointer; font-size: .85rem; line-height: 1; padding: 0; }
.kare-dugme:hover:not(:disabled) { background: #25507A; } .kare-dugme:disabled { opacity: .35; cursor: default; }
.kare-dugme[data-is=sil]:hover { background: var(--mercan); border-color: var(--mercan); }
.hediye-sonuc { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; }
.hediye { display: grid; justify-items: center; gap: 2px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px; padding: 8px 4px; color: var(--yazi); cursor: pointer; font-family: var(--govde); min-width: 0; }
.hediye:hover { border-color: var(--ana); background: #10283E; } .hediye img { width: 56px; height: 56px; object-fit: contain; border-radius: 0; }
.hediye span { font-size: .76rem; font-weight: 700; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hediye small { color: var(--altin); font-weight: 800; font-size: .74rem; }
details.oto { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px; padding: 0 14px; } details.oto summary { cursor: pointer; font-weight: 800; padding: 12px 0; } details.oto[open] { padding-bottom: 14px; } details.oto p { margin-bottom: 10px; }
input.kisa.genis { width: 120px; } .form.yatay input.kisa { flex: 0 0 auto; }
.tema-listesi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tema { display: grid; gap: 5px; justify-items: center; background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 12px; padding: 8px 4px; color: var(--yazi); font: 700 .78rem var(--govde); cursor: pointer; }
.tema i { width: 100%; height: 30px; border-radius: 8px; display: block; border: 1px solid rgba(255, 255, 255, .15); } .tema:hover { border-color: var(--cizgi2); } .tema[aria-pressed=true] { border-color: var(--ana); background: rgba(34, 195, 230, .12); }
.renkler { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.renk-alan { display: grid; gap: 4px; justify-items: center; font-size: .78rem; font-weight: 700; cursor: pointer; }
.renk-alan input { width: 100%; height: 42px; padding: 3px; border-radius: 10px; cursor: pointer; }
input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--ana); height: 26px; } input[type=range]:focus { box-shadow: none; }
label output { color: var(--ana2); font-weight: 800; margin-left: 4px; }
.kutucuklar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kutucuklar .onay { font-size: .92rem; }
.yerlesim-listesi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.secim { position: relative; cursor: pointer; } .secim input { position: absolute; opacity: 0; }
.secim span { display: grid; gap: 6px; justify-items: center; background: var(--zemin); border: 2px solid var(--cizgi); border-radius: 12px; padding: 10px 4px; font-size: .78rem; font-weight: 700; text-align: center; }
.secim input:checked + span { border-color: var(--ana); background: rgba(34, 195, 230, .12); } .secim input:focus-visible + span { outline: 3px solid rgba(126, 232, 250, .7); }
.yerlesim-simge { width: 38px; height: 30px; display: block; border-radius: 4px; background-color: transparent; background-repeat: no-repeat; --c: var(--ana2); }
.yerlesim-simge.liste { background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-size: 100% 7px; background-position: 0 0, 0 11px, 0 22px; }
.yerlesim-simge.ikili { background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-size: 17px 12px; background-position: 0 0, 21px 0, 0 17px, 21px 17px; }
.yerlesim-simge.izgara { background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-size: 10px 13px; background-position: 0 0, 14px 0, 28px 0, 0 17px, 14px 17px, 28px 17px; }
.yerlesim-simge.serit { background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-size: 8px 14px; background-position: 0 8px, 10px 8px, 20px 8px, 30px 8px; }
.cipalar { display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; padding: 8px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px; width: fit-content; }
.cipalar button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cizgi2); background: #1C3A59; cursor: pointer; position: relative; } .cipalar button::after { content: ""; position: absolute; inset: 11px; border-radius: 3px; background: var(--ana2); } .cipalar button:hover { background: var(--ana); } .cipalar button:hover::after { background: #06202E; }
.canli-kutu { background: rgba(255, 207, 63, .07); border: 1px solid rgba(255, 207, 63, .4); border-radius: 12px; padding: 14px; display: grid; gap: 8px; } .canli-kutu h3 { margin: 0; color: var(--altin); } .canli-kutu .anahtar { margin: 0; }
.kayitli { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 10px; margin-top: 6px; } .kayitli > span:first-child { flex: 1; display: grid; min-width: 0; } .kayitli.acik { border-color: var(--ana); }
#sKayitli h3 { margin-bottom: 4px; }

/* ================= Görünüm 2 (2026-09-30) =================
   Sinematik giriş, görsel ağırlıklı oyun kartları, hap etiketli bölüm başlıkları, kayan hediye şeridi,
   görsel arka planlı bant, yüzen iletişim düğmesi. Kimlik aynı: lacivert, camgöbeği, mercan, altın, yuvarlak. */
body { background: radial-gradient(1200px 700px at 100% -10%, rgba(34, 195, 230, .09), transparent 60%), var(--zemin); }
/* küp deseni: logodaki küpten, çok soluk */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z M28 32 54 17 M28 32v30 M28 32 2 17' fill='none' stroke='%2322C3E6' stroke-opacity='.05' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }

/* üst şerit: sayfanın üstünde yüzen cam çubuk */
.ust { background: transparent; border: 0; backdrop-filter: none; padding-top: 10px; }
.ust-ic { background: rgba(11, 27, 43, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(43, 83, 121, .7); border-radius: 18px; padding: 0 10px 0 16px; min-height: 62px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (min-width: 900px) {
  .menu a:not(.btn) { position: relative; padding: 10px 11px; background: none !important; }
  .menu a:not(.btn)::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--ana); transform: scaleX(0); transition: transform .2s; }
  .menu a:not(.btn):hover::after, .menu a.etkin::after { transform: scaleX(1); }
}

/* hap etiket ve bölüm başlığı */
.hap { display: inline-flex; align-items: center; gap: 8px; font: 800 .8rem/1 var(--govde); letter-spacing: .04em; color: var(--yazi); padding: 8px 14px; border: 1.5px solid rgba(126, 232, 250, .45); border-radius: 999px; background: rgba(34, 195, 230, .08); margin-bottom: 14px; }
.hap.altin-hap { border-color: rgba(255, 207, 63, .55); background: rgba(255, 207, 63, .1); color: #FFE9A6; }
.canli-hap i { width: 8px; height: 8px; border-radius: 50%; background: var(--mercan); box-shadow: 0 0 0 0 rgba(255, 77, 94, .7); animation: nabiz 1.8s infinite; }
@keyframes nabiz { 70% { box-shadow: 0 0 0 9px rgba(255, 77, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); } }
.b-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.b-bas h2, .b-bas h1 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); font-weight: 700; margin: 0; background: linear-gradient(180deg, #fff 35%, #BFD6E8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b-alt { color: var(--soluk); margin: 10px 0 0; max-width: 620px; }
.sayfa-ust { padding-top: 34px; }
.btn.cam { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(6px); }
.btn.cam:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.btn.ana { box-shadow: 0 8px 24px rgba(34, 195, 230, .28); }

/* ---------- sinematik giriş ---------- */
.sahne { position: relative; overflow: hidden; margin-top: -72px; padding: calc(72px + clamp(40px, 7vw, 92px)) 0 clamp(44px, 6vw, 80px); isolation: isolate; }
.sahne::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sahne-gorsel, none) center 30% / cover no-repeat; filter: saturate(1.15) blur(2px); transform: scale(1.04); opacity: .55; }
.sahne::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 27, 43, .97) 0%, rgba(11, 27, 43, .86) 42%, rgba(11, 27, 43, .55) 100%), linear-gradient(180deg, rgba(11, 27, 43, .3) 0%, transparent 40%, var(--zemin) 100%), radial-gradient(700px 400px at 80% 40%, rgba(34, 195, 230, .22), transparent 70%); }
.sahne-ic { display: grid; gap: 38px; align-items: center; }
@media (min-width: 980px) { .sahne-ic { grid-template-columns: 1.05fr 1fr; gap: 56px; } }
.sahne h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight: 700; line-height: 1.04; margin-bottom: 18px; background: linear-gradient(180deg, #fff 40%, var(--ana2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.sahne .giris { max-width: 540px; margin-bottom: 26px; }
.sahne-sayilar { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sahne-sayilar li { display: grid; padding: 10px 18px 10px 14px; border-left: 3px solid var(--ana); background: linear-gradient(90deg, rgba(34, 195, 230, .12), transparent); border-radius: 4px 12px 12px 4px; }
.sahne-sayilar b { font: 700 1.35rem/1.1 var(--baslik); color: #fff; } .sahne-sayilar span { font-size: .82rem; color: var(--soluk); font-weight: 700; }
.sahne .demo { transform: rotate(1.2deg); transition: transform .3s; } .sahne .demo:hover { transform: rotate(0); }

/* kayan hediye şeridi */
.akis { overflow: hidden; border-block: 1px solid rgba(43, 83, 121, .6); background: rgba(7, 19, 31, .75); padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.akis-ic { display: flex; gap: 34px; width: max-content; animation: kay 42s linear infinite; }
.akis span { white-space: nowrap; font-size: .92rem; color: #C9D8E6; font-weight: 700; }
.akis span::before { content: "◆"; color: var(--ana); margin-right: 10px; font-size: .7em; vertical-align: middle; }
.akis b { color: var(--ana2); } .akis em { font-style: normal; color: var(--altin); }
@keyframes kay { to { transform: translateX(-50%); } }

/* ---------- oyun kartları ---------- */
.oyun-izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1100px) { .oyun-izgara { grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); } }
.oyun-karti { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; border: 1px solid rgba(43, 83, 121, .8); background: var(--kart); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); transition: transform .25s, box-shadow .25s, border-color .25s; }
.oyun-karti:hover { transform: translateY(-6px); border-color: var(--ana); box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 0 4px rgba(34, 195, 230, .15); color: #fff; }
.ok-gorsel { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; background: linear-gradient(135deg, #16324D, #0B1B2B); }
.ok-gorsel img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s; }
.oyun-karti:hover .ok-gorsel img { transform: scale(1.07); }
.oyun-karti:not(.ozel):not(.oy) .ok-gorsel .maskot { margin-bottom: 40%; }
.oyun-karti::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(7, 19, 31, .7) 55%, rgba(7, 19, 31, .97) 100%); }
.ok-gorsel.ozel-gorsel .maskot, .ok-gorsel.soru-gorsel .soru { margin-bottom: 38%; }
.ok-gorsel .soru { font: 700 6rem/1 var(--baslik); color: var(--ana2); text-shadow: 0 8px 0 rgba(0, 0, 0, .25); }
.ok-rozet { position: absolute; top: 14px; right: 14px; font: 800 .75rem/1 var(--govde); padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.ok-rozet.yesil { background: rgba(74, 222, 128, .9); color: #06321A; } .ok-rozet.sari { background: rgba(255, 207, 63, .92); color: #2A2000; }
.ok-rozet.mor { background: rgba(157, 146, 255, .92); color: #140F3A; } .ok-rozet.mavi { background: rgba(126, 232, 250, .92); color: #06202E; }
.ok-yazi { display: grid; gap: 6px; padding: 20px 20px 18px; }
.ok-ad { font: 700 1.55rem/1.1 var(--baslik); }
.ok-kisa { color: #C9D8E6; font-size: .93rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ok-alt { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ok-fiyat { font: 700 1.3rem var(--baslik); color: var(--altin); } .ok-alt small { color: var(--soluk); }
.ok-ok { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-weight: 900; transition: background .2s, transform .2s; align-self: center; }
.oyun-karti:hover .ok-ok { background: var(--ana); color: #06202E; transform: translateX(3px); }

/* ---------- özellikler: kutusuz, simgeli ---------- */
.ozellik-izgara { display: grid; gap: 30px 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ozellik-oge .simge { width: 54px; height: 54px; padding: 12px; margin-bottom: 14px; color: #fff; border-radius: 16px; background: linear-gradient(135deg, var(--ana), #1668A8); box-shadow: 0 10px 24px rgba(34, 195, 230, .25); }
.ozellik-oge:nth-child(4n+2) .simge { background: linear-gradient(135deg, var(--mercan), #B8324A); box-shadow: 0 10px 24px rgba(255, 77, 94, .22); }
.ozellik-oge:nth-child(4n+3) .simge { background: linear-gradient(135deg, var(--altin), #D99A12); color: #2A2000; box-shadow: 0 10px 24px rgba(255, 207, 63, .2); }
.ozellik-oge:nth-child(4n+4) .simge { background: linear-gradient(135deg, var(--mor), #5A4FD1); box-shadow: 0 10px 24px rgba(157, 146, 255, .22); }
.ozellik-oge h3 { font-size: 1.2rem; margin-bottom: 6px; } .ozellik-oge p { color: var(--soluk); margin: 0; font-size: .96rem; }

/* ---------- görsel arka planlı bant ---------- */
.serit-bant { position: relative; isolation: isolate; overflow: hidden; padding: clamp(50px, 8vw, 110px) 0; margin: clamp(10px, 3vw, 30px) 0; }
.serit-bant::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bant-gorsel, linear-gradient(135deg, #16324D, #0B1B2B)) center / cover no-repeat; }
.serit-bant::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 27, 43, .96) 10%, rgba(11, 27, 43, .7) 55%, rgba(11, 27, 43, .35)), linear-gradient(180deg, var(--zemin), transparent 18%, transparent 82%, var(--zemin)); }
.bant-ic { display: grid; gap: 30px; align-items: center; }
@media (min-width: 940px) { .bant-ic { grid-template-columns: 1fr 1.1fr; gap: 50px; } }
.bant-yazi h2 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; }
.bant-yazi > p { color: #D5E1EC; font-size: 1.08rem; }
.bant-video video { border: 2px solid rgba(126, 232, 250, .35); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); border-radius: 18px; }

/* adımlar: numara sola, bağlayan çizgi */
.adimlar.yeni li { background: linear-gradient(180deg, var(--kart2), var(--kart)); border-radius: 20px; padding: 26px; overflow: hidden; }
.adimlar.yeni li > b { width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(34, 195, 230, .3); }
.adimlar.yeni li:nth-child(2) > b { background: var(--altin); color: #2A2000; box-shadow: 0 8px 20px rgba(255, 207, 63, .25); }
.adimlar.yeni li:nth-child(3) > b { background: var(--mercan); color: #fff; box-shadow: 0 8px 20px rgba(255, 77, 94, .25); }

/* özel yapım şeridi */
.ozel-serit { position: relative; overflow: hidden; border-radius: 28px; background: radial-gradient(600px 300px at 0% 50%, rgba(255, 207, 63, .16), transparent 70%), linear-gradient(120deg, #2A2350, #173250); }
.ozel-serit h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.ozel-serit .ozel-maskot { position: relative; padding: 10px; }

/* SSS iki sütun */
.sss-duzen { display: grid; gap: 10px 50px; align-items: start; }
@media (min-width: 940px) { .sss-duzen { grid-template-columns: .8fr 1.2fr; } .sss-duzen > div:first-child { position: sticky; top: 100px; } }
.sss details { border-radius: 16px; transition: border-color .2s; } .sss details[open] { border-color: var(--cizgi2); background: var(--kart2); }

/* son çağrı */
.son-cagri.yeni { display: grid; gap: 18px; align-items: center; justify-items: center; text-align: center; margin-top: 0; padding: clamp(28px, 5vw, 50px); border-radius: 28px; background: radial-gradient(500px 240px at 50% 0, rgba(34, 195, 230, .3), transparent 70%), linear-gradient(180deg, var(--kart2), var(--kart)); }
.son-cagri.yeni h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: 6px; } .son-cagri.yeni p { color: var(--soluk); margin: 0; }
@media (min-width: 900px) { .son-cagri.yeni { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; } }

/* ürün sayfasının üstü: kapak görseli arkada */
.urun-ust { position: relative; isolation: isolate; overflow: hidden; }
.urun-ust::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sahne-gorsel, none) center / cover no-repeat; opacity: .28; filter: blur(3px); transform: scale(1.05); }
.urun-ust::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--zemin) 20%, rgba(11, 27, 43, .75)), linear-gradient(180deg, transparent 60%, var(--zemin)); }
.urun-ust h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 700; }

/* kartlar biraz daha yumuşak */
.kart { border-radius: 20px; background: linear-gradient(180deg, rgba(23, 50, 80, .55), var(--kart) 60%); }
.fiyat-karti.one-cikan { box-shadow: 0 0 0 4px rgba(34, 195, 230, .14), var(--golge); transform: translateY(-6px); }

/* yüzen iletişim düğmesi */
.yuzen { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--ana); color: #06202E; font-weight: 900; text-decoration: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .4), 0 0 0 6px rgba(34, 195, 230, .18); transition: transform .2s; }
.yuzen:hover { transform: translateY(-3px); color: #06202E; }
@media (max-width: 560px) { .yuzen span { display: none; } .yuzen { padding: 14px; } }

/* kaydırınca beliren bölümler (site.js ekler; betik yoksa her şey görünür) */
.belir-hazir .belir { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.belir-hazir .belir.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .belir-hazir .belir { opacity: 1; transform: none; } }
@media print { .yuzen, .akis, .ust, .alt, .hesap-menu, .y-yan, .duyuru { display: none; } body { background: #fff; color: #000; } .kart { box-shadow: none; border-color: #999; background: #fff; } }

/* Tanıtım videosu: bilgisayarda yatay, telefonda dikey sürüm */
.video-cift video { display: block; width: 100%; height: auto; }
.video-cift .v-dikey { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  .video-cift.iki-yon .v-yatay { display: none; }
  .video-cift.iki-yon .v-dikey { display: block !important; max-height: 82vh; width: auto; max-width: 100%; margin: 0 auto; aspect-ratio: 9 / 16; }
}
/* Ana sayfa: Kubio'yu bir dakikada tanı */
.kubio-video { display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px; align-items: center; }
.kubio-video .kv-video video { border: 2px solid rgba(126, 232, 250, .35); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); border-radius: 18px; }
@media (max-width: 900px) { .kubio-video { grid-template-columns: 1fr; } }

/* ================= Hediye şablonu: kenarlara diz (2026-09-30) ================= */
.studyo[data-mod=kenar] .yalniz-kart, .studyo:not([data-mod=kenar]) .yalniz-kenar { display: none !important; }
.yerlesim-simge.kenar { background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-size: 8px 8px; background-position: 15px 0, 0 8px, 0 20px, 30px 8px, 30px 20px, 15px 22px; outline: 1px dashed rgba(126, 232, 250, .35); outline-offset: 1px; }
.satir-bilgi { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.kenar-ayar { display: inline-flex; align-items: center; gap: 5px; }
.kenar-ayar select { padding: 3px 6px; font-size: .78rem; border-width: 1px; border-radius: 7px; width: auto; }
.kenar-ayar input[type=color] { width: 30px; height: 26px; padding: 1px; border-radius: 7px; border: 1px solid var(--cizgi2); background: transparent; cursor: pointer; }
.kenar-ayar .kare-dugme { width: 26px; height: 26px; }
.kenar-not { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .kenar-not p { margin: 0; flex: 1 1 220px; }
.kenar-stil i { display: grid !important; place-items: center; font-size: 1.15rem; font-style: normal; paint-order: stroke fill; }
.yerlesim-simge.serit { position: static; transform: none; padding: 0; border-radius: 4px; background-color: transparent; } /* sayfadaki .serit rozetiyle çakışmasın */

/* ---------- yayıncı rehberi ---------- */
.rehber-kart { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; padding: 0 0 18px; overflow: hidden; transition: transform .2s, border-color .2s; }
.rehber-kart:hover { transform: translateY(-3px); border-color: var(--ana); }
.rehber-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; margin-bottom: 8px; }
.rehber-kart > :not(img) { margin-left: 18px; margin-right: 18px; }
.rehber-kart h3 { font-size: 1.1rem; margin-bottom: 2px; }
.rehber-kart p { color: var(--soluk); margin-top: 0; margin-bottom: 0; font-size: .95rem; }
.rehber-yazi { font-size: 1.05rem; line-height: 1.7; }
.rehber-yazi ol { padding-left: 1.4em; }
.rehber-yazi li { margin-bottom: .4em; }
.rehber-yazi .giris { font-size: 1.15rem; }
.rehber-not { margin: 1.6em 0; font-weight: 600; }
.rehber-not a, .rehber-yazi p a, .rehber-yazi li a { color: var(--ana2); }

/* yönetim: ziyaretçiler */
.z-grafik { display: flex; align-items: flex-end; gap: 3px; height: 190px; margin-bottom: 8px; }
.z-gun { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.z-kap { position: relative; flex: 1; width: 100%; display: block; } .z-kap i { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 5px 5px 2px 2px; }
.z-v { background: rgba(157, 176, 196, .32); } .z-t { background: linear-gradient(180deg, var(--ana2), var(--derin)); left: 22% !important; right: 22% !important; }
.z-gun small { height: 14px; font-size: .68rem; color: var(--soluk); white-space: nowrap; }
.z-aciklama { color: var(--soluk); font-size: .85rem; margin: 6px 0 0; } .z-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; } .z-nokta:first-child { margin-left: 0; } .z-nokta.ana { background: var(--ana); } .z-nokta.sol { background: rgba(157, 176, 196, .5); }
.z-liste { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.z-liste li { display: grid; grid-template-columns: minmax(70px, 130px) 1fr auto 44px; gap: 10px; align-items: center; } .z-liste small { color: var(--soluk); text-align: right; } .z-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-cubuk { height: 10px; background: var(--zemin); border-radius: 6px; overflow: hidden; } .z-cubuk i { display: block; height: 100%; background: var(--ana); border-radius: 6px; }
.z-oran { display: flex; height: 16px; border-radius: 10px; overflow: hidden; background: var(--zemin); margin-top: 8px; } .z-oran .tel { background: var(--ana); } .z-oran .bil { background: rgba(157, 176, 196, .5); }
a.sayi-karti.kart { margin-bottom: 18px; }