/* =====================================================================
MANROPE · kendi sunucumuzda barindirilir
---------------------------------------------------------------------
Google Fonts'tan cekilmez: (1) ziyaretci IP adresi Google'a gitmez —
KVKK acisindan onemlidir, (2) ucuncu taraf istegi olmadigi icin sayfa
daha hizli acilir, (3) Google'a erisilemedigi durumda da yazi tipi
dogru gorunur.
Degisken font: tek dosya 200-800 arasi tum kalinliklari kapsar.
Lisans: assets/fonts/manrope-LICENSE.txt (SIL Open Font License 1.1)
===================================================================== */
@font-face{
font-family:'Manrope';
font-style:normal;
font-weight:200 800;
font-display:swap;
src:url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Manrope';
font-style:normal;
font-weight:200 800;
font-display:swap;
src:url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* =====================================================================
OTOTAKSITLIAL v2 - Tasarim Sistemi
===================================================================== */
:root{
/* Marka */
--brand:#ffc926; /* kurumsal sari - OTO_LOGO */
--brand-600:#eab308;
--brand-700:#7d5d03; /* WCAG AA: en acik marka zemininde bile 5.8:1 */
--brand-soft:#fff9e6;
--brand-ring:rgba(255,201,38,.38);
--logo-ink:#333333;
/* Notr */
--ink:#0f172a;
--ink-2:#1e293b;
--muted:#586675; /* WCAG AA: acik gri zeminde 5.37:1 */
--muted-2:#627083; /* WCAG AA: beyaz uzerinde 5.04:1 — hepsi metin rengi */
--line:#e2e8f0;
--line-2:#f1f5f9;
--bg:#f7f8fa;
--card:#ffffff;
/* Durum */
--ok:#0a7644; /* WCAG AA: metinde 5.69:1, uzerinde beyaz da 5.69:1 */
--ok-soft:#e7f6ee;
--warn:#e08b00;
--warn-soft:#fff4e0;
--err:#d92d20;
--err-soft:#fdecea;
--info:#1d6fd0;
--info-soft:#e8f1fd;
--violet:#6d3fd1;
--violet-soft:#f0eafd;
/* Olculer */
--r-sm:8px;
--r:12px;
--r-lg:18px;
--r-xl:24px;
--sh-sm:0 1px 2px rgba(15,23,42,.06);
--sh:0 4px 16px rgba(15,23,42,.07);
--sh-lg:0 12px 40px rgba(15,23,42,.11);
--container:1240px;
--header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
font-feature-settings:'ss01' 1,'ss03' 1;
font-size:15px;line-height:1.6;color:var(--ink);background:var(--bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.25;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
small{font-size:.82rem}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.container-sm{max-width:840px}
.container-xs{max-width:560px}
/* ---------------- Yardimci ---------------- */
.row{display:flex;gap:16px;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.center{text-align:center}
.right{text-align:right}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.78rem}
.bold{font-weight:700}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:36px}
.hide{display:none!important}
.text-ok{color:var(--ok)}
.text-err{color:var(--err)}
.text-warn{color:var(--warn)}
/* Gecikme / sorunlu vurgusu. Tahsilat, poliçe ve senet ekranları bu adı
kullanıyordu ama karşılığı tanımlı değildi; vurgulanması gereken
rakamlar sessizce normal renkte çıkıyordu. */
.metin-uyari{color:var(--err)}
tr.satir-uyari{background:#fff5f5}
tr.satir-uyari:hover{background:#ffecec}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.flex1{flex:1;min-width:0}
section.pad{padding:56px 0}
section.pad-sm{padding:32px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head p{margin:4px 0 0;color:var(--muted)}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-700);margin-bottom:6px}
/* ---------------- Butonlar ---------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 20px;border-radius:var(--r);border:1px solid transparent;
font-weight:600;font-size:.92rem;cursor:pointer;transition:.18s;
background:var(--ink);color:#fff;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.btn:active{transform:translateY(0)}
.btn-brand{background:var(--brand);color:#20160a}
.btn-brand:hover{background:var(--brand-600)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted-2);background:#fff}
.btn-soft{background:var(--brand-soft);color:var(--brand-700);border-color:#f6e3ad}
.btn-danger{background:var(--err);color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-lg{padding:14px 26px;font-size:1rem;border-radius:14px}
.btn-sm{padding:7px 13px;font-size:.82rem;border-radius:9px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* ---------------- Kart ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card-pad{padding:24px}
.card-head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-head h3{margin:0;font-size:1.02rem}
.card-body{padding:24px}
.card-foot{padding:16px 24px;border-top:1px solid var(--line);background:var(--line-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
/* ---------------- Rozet ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--line-2);color:var(--muted);white-space:nowrap}
.badge-yesil{background:var(--ok-soft);color:#0b6e3f}
.badge-yesil-acik{background:#eefbf3;color:#12855a}
.badge-sari{background:var(--warn-soft);color:#8a5a00}
.badge-turuncu{background:#fff1e6;color:#b34700}
.badge-kirmizi{background:var(--err-soft);color:#a91b12}
.badge-mavi{background:var(--info-soft);color:#134f96}
.badge-mor{background:var(--violet-soft);color:#4f2a9c}
.badge-gri{background:var(--line-2);color:var(--muted)}
.badge-brand{background:var(--brand-soft);color:var(--brand-700)}
/* ---------------- Uyari kutulari ---------------- */
.alert{padding:13px 16px;border-radius:var(--r);margin-bottom:16px;font-size:.9rem;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start}
.alert-basari,.alert-success{background:var(--ok-soft);color:#0b6e3f;border-color:#bfe6d1}
.alert-hata,.alert-error{background:var(--err-soft);color:#a91b12;border-color:#f5c6c2}
.alert-uyari,.alert-warning{background:var(--warn-soft);color:#8a5a00;border-color:#f3ddb0}
.alert-bilgi,.alert-info{background:var(--info-soft);color:#134f96;border-color:#c6dcf8}
/* Alert bir flex kutusudur; icine cok satirli metin konursa
calismaz.
Bu sinif icerigi tek blok yapip satir sonlarinin islemesini saglar. */
.alert > *{min-width:0}
.alert-blok{display:block}
.hesap-sonuc{
display:block;padding:12px 14px;border-radius:var(--r);font-size:.9rem;line-height:1.6;
background:var(--info-soft);color:#134f96;border:1px solid #c6dcf8;overflow-wrap:anywhere
}
/* ---------------- Form ---------------- */
.form-group{margin-bottom:18px}
.form-group label,.lbl{display:block;font-weight:600;font-size:.86rem;margin-bottom:6px;color:var(--ink-2)}
.lbl .opt{font-weight:400;color:var(--muted-2)}
.form-control,input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=search],select,textarea{
width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
background:#fff;font-size:.92rem;color:var(--ink);transition:.15s;font-family:inherit;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)
}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.form-hint{font-size:.78rem;color:var(--muted);margin-top:5px}
.form-error{font-size:.8rem;color:var(--err);margin-top:5px;font-weight:600}
.has-error .form-control,.has-error input,.has-error select{border-color:var(--err)}
.input-group{display:flex}
.input-group .form-control{border-radius:var(--r) 0 0 var(--r)}
.input-group .suffix{display:flex;align-items:center;padding:0 14px;background:var(--line-2);border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0;font-weight:600;color:var(--muted);font-size:.9rem}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;line-height:1.5}
.check input{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--brand)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
.form-grid .full{grid-column:1/-1}
/* Segment secici (radio pills) */
.segments{display:flex;gap:8px;flex-wrap:wrap}
.segments input{position:absolute;opacity:0;pointer-events:none}
.segments label{
display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border:1px solid var(--line);
border-radius:999px;cursor:pointer;font-size:.86rem;font-weight:600;background:#fff;color:var(--muted);transition:.15s;margin:0
}
.segments input:checked + label{background:var(--ink);border-color:var(--ink);color:#fff}
.segments.brand input:checked + label{background:var(--brand);border-color:var(--brand);color:#20160a}
/* Range */
input[type=range]{width:100%;accent-color:var(--brand);height:24px}
/* ---------------- Tablo ---------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
table.tbl th{
text-align:left;padding:11px 14px;background:var(--line-2);color:var(--muted);
font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
border-bottom:1px solid var(--line);
}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:#fcfcfd}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl.compact td,table.tbl.compact th{padding:8px 11px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------------- Sayfalama ---------------- */
.pagination{display:flex;gap:6px;justify-content:center;margin:32px 0;flex-wrap:wrap}
.pagination a{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.88rem;font-weight:600;color:var(--muted)}
.pagination a:hover{border-color:var(--brand);color:var(--ink)}
.pagination a.active{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .gap{display:inline-flex;align-items:center;padding:0 4px;color:var(--muted-2)}
/* =====================================================================
HEADER
===================================================================== */
.topbar{background:var(--ink);color:#cbd5e1;font-size:.8rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.topbar a{color:#e2e8f0}
.topbar a:hover{color:var(--brand)}
.topbar .links{display:flex;gap:18px}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.site-header .container{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:10px;flex:none;line-height:0}
.logo img{display:block;height:38px;width:auto}
.logo .logo-yazi{font-weight:800;font-size:1.05rem;letter-spacing:-.03em;line-height:1.1;color:var(--logo-ink)}
.logo .logo-yazi small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.site-header .logo img{height:40px}
.site-footer .logo img{height:38px}
.admin-top .logo img{height:30px}
.auth-card .logo img{height:44px}
@media(max-width:720px){.site-header .logo img{height:32px}}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav > a,.main-nav > .drop > a{
padding:9px 13px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px
}
.main-nav > a:hover,.main-nav > .drop:hover > a,
.main-nav > .drop:focus-within > a{background:var(--line-2)}
.main-nav > a.active{color:var(--brand-700)}
.drop{position:relative}
.drop-menu{
position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:#fff;border:1px solid var(--line);
border-radius:var(--r);box-shadow:var(--sh-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:70
}
.drop:hover .drop-menu,
.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.drop-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:.88rem;font-weight:500;color:var(--ink-2)}
.drop-menu a:hover{background:var(--brand-soft);color:var(--brand-700)}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}
/* =====================================================================
HERO
===================================================================== */
.hero{
background:linear-gradient(135deg,#0f172a 0%,#1e293b 55%,#334155 100%);
color:#fff;padding:64px 0 76px;position:relative;overflow:hidden
}
.hero::after{
content:'';position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(247,181,0,.28),transparent 65%)
}
.hero .container{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.lead{font-size:1.06rem;color:#cbd5e1;max-width:56ch;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hero-stats .s b{display:block;font-size:1.6rem;color:var(--brand);letter-spacing:-.03em}
/* Kahraman alani gradyaninin en ACIK duragi #3d444d; eski #94a3b8 orada
3.84:1 kaliyordu (WCAG AA 4.5 ister). #adbaca ile 5.0:1. */
.hero-stats .s span{font-size:.82rem;color:#adbaca}
/* Hero arama kutusu */
.search-box{background:#fff;border-radius:var(--r-xl);padding:18px;box-shadow:var(--sh-lg);margin-top:-46px;position:relative;z-index:5}
.search-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap}
.search-tabs button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
.search-tabs button.active{background:var(--brand);border-color:var(--brand);color:#20160a}
.search-fields{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
/* =====================================================================
ARAC KARTLARI
===================================================================== */
/* NOT: asagida minmax(min(Xpx,100%),1fr) kalibi kullanilir.
Duz minmax(Xpx,1fr) yazildiginda, kapsayici X'ten darsa iz yine de
X kadar yer kaplar ve sayfayi yatay kaydirir. min(...,100%) sarmali
dar ekranda izin kapsayiciya kadar kuculmesine izin verir. */
.arac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:22px}
.arac-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.arac-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#d7dde5}
.arac-foto{position:relative;aspect-ratio:4/3;background:var(--line-2);overflow:hidden}
.arac-foto img{width:100%;height:100%;object-fit:cover;transition:.35s}
.arac-card:hover .arac-foto img{transform:scale(1.05)}
.arac-etiketler{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.arac-fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);border:0;display:grid;place-items:center;cursor:pointer;font-size:.95rem;color:var(--muted)}
.arac-fav.on{color:var(--err)}
.arac-body{padding:16px;display:flex;flex-direction:column;flex:1}
.arac-body h3{font-size:.98rem;margin:0 0 8px;line-height:1.35}
.arac-body h3 a:hover{color:var(--brand-700)}
.arac-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.arac-meta span{font-size:.75rem;background:var(--line-2);color:var(--muted);padding:3px 8px;border-radius:6px;font-weight:600}
.arac-fiyat{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2)}
.arac-fiyat .p{font-size:1.22rem;font-weight:800;letter-spacing:-.03em}
.arac-fiyat .eski{font-size:.82rem;color:var(--muted-2);text-decoration:line-through;margin-left:7px}
.arac-taksit{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:9px 11px;background:var(--brand-soft);border-radius:10px;font-size:.8rem}
.arac-taksit b{color:var(--brand-700);font-size:.92rem}
.arac-konum{font-size:.78rem;color:var(--muted);margin-top:8px}
/* =====================================================================
ADIM / SUREC
===================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;position:relative}
.step::before{
counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;width:36px;height:36px;
background:var(--brand);color:#20160a;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;box-shadow:0 4px 12px var(--brand-ring)
}
.step h3{margin:12px 0 6px;font-size:1rem}
.step p{margin:0;font-size:.88rem;color:var(--muted)}
/* Avantaj kutulari */
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.feature .ico{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;font-size:1.25rem;margin-bottom:14px}
.feature h3{font-size:1rem;margin-bottom:6px}
.feature p{margin:0;font-size:.88rem;color:var(--muted)}
/* Banka logolari */
.banka-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px}
.banka-kutu{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 12px;display:grid;place-items:center;min-height:82px;text-align:center;font-weight:700;font-size:.85rem;color:var(--ink-2);transition:.18s}
.banka-kutu:hover{border-color:var(--brand);box-shadow:var(--sh)}
.banka-kutu img{max-height:38px;width:auto;object-fit:contain}
/* Anlasmali kurum karuseli
Ray, listenin IKI kopyasini tasir ve tam yarisi kadar kayar; ikinci
kopya birincinin bittigi yerde basladigi icin dikis gorunmez.
Uzerine gelince ve klavye odagi icerideyken durur. */
.kurum-karusel{position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.kurum-ray{display:flex;width:max-content;
animation:kurumKay var(--kurum-sure,38s) linear infinite}
.kurum-karusel:hover .kurum-ray,
.kurum-karusel:focus-within .kurum-ray{animation-play-state:paused}
.kurum-oba{display:flex;gap:14px;padding-right:14px}
.kurum-kutu{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:18px 16px;display:grid;place-items:center;min-height:82px;text-align:center;
font-weight:700;font-size:.85rem;color:var(--ink-2);transition:.18s}
.kurum-kutu:hover{border-color:var(--brand);box-shadow:var(--sh)}
.kurum-kutu img{max-height:40px;max-width:150px;width:auto;object-fit:contain}
.kurum-karusel .kurum-kutu{min-width:186px}
.kurum-karusel.gri .kurum-kutu img{filter:grayscale(1);opacity:.74;transition:.2s}
.kurum-karusel.gri .kurum-kutu:hover img{filter:none;opacity:1}
.kurum-ad{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);white-space:nowrap}
.kurum-nokta{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.banka-serit .kurum-kutu{width:100%}
@keyframes kurumKay{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Hareket azaltma tercihi: kaydirma durur, serit elle kaydirilir.
Kopya listeyi gizliyoruz — duran bir seritte ayni kurumu iki kez
gostermenin anlami yok. */
@media (prefers-reduced-motion:reduce){
.kurum-karusel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.kurum-ray{animation:none}
.kurum-oba[aria-hidden="true"]{display:none}
}
/* =====================================================================
KREDI HESAPLAMA
===================================================================== */
.hesap-layout{display:grid;grid-template-columns:400px 1fr;gap:26px;align-items:start}
.hesap-form{position:sticky;top:calc(var(--header-h) + 16px)}
.ozet-kutu{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ozet-item{background:var(--line-2);border-radius:var(--r);padding:14px}
.ozet-item span{display:block;font-size:.74rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ozet-item b{display:block;font-size:1.12rem;letter-spacing:-.02em;margin-top:3px}
.ozet-item.vurgu{background:var(--brand-soft)}
.ozet-item.vurgu b{color:var(--brand-700)}
/* Teklif kartlari */
.teklif{display:grid;grid-template-columns:180px 1fr auto;gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-bottom:12px;transition:.18s}
.teklif:hover{border-color:var(--brand);box-shadow:var(--sh)}
.teklif.enucuz{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.teklif.pasif{opacity:.55;background:var(--line-2)}
.teklif-banka{display:flex;align-items:center;gap:11px;min-width:0}
.teklif-banka .lg{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;flex:none}
.teklif-banka .ad{font-weight:700;font-size:.92rem;line-height:1.3}
.teklif-detay{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.teklif-detay .d span{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
.teklif-detay .d b{font-size:.95rem;font-variant-numeric:tabular-nums}
.teklif-detay .d.taksit b{color:var(--brand-700);font-size:1.08rem}
/* Uyari serit */
.bddk-uyari{background:var(--info-soft);border:1px solid #c6dcf8;border-radius:var(--r);padding:14px 16px;font-size:.86rem;color:#134f96;margin-bottom:18px}
/* =====================================================================
BASVURU ADIMLARI
===================================================================== */
.adim-cizgi{display:flex;align-items:center;margin-bottom:32px;counter-reset:a}
.adim-cizgi .a{flex:1;text-align:center;position:relative;font-size:.8rem;font-weight:600;color:var(--muted-2)}
.adim-cizgi .a .n{
width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--muted-2);
display:grid;place-items:center;margin:0 auto 7px;font-weight:800;font-size:.85rem;position:relative;z-index:2
}
.adim-cizgi .a::before{content:'';position:absolute;top:17px;left:0;right:50%;height:2px;background:var(--line);z-index:1}
.adim-cizgi .a::after{content:'';position:absolute;top:17px;left:50%;right:0;height:2px;background:var(--line);z-index:1}
.adim-cizgi .a:first-child::before,.adim-cizgi .a:last-child::after{display:none}
.adim-cizgi .a.tamam .n{background:var(--ok);border-color:var(--ok);color:#fff}
.adim-cizgi .a.tamam::before,.adim-cizgi .a.tamam::after{background:var(--ok)}
.adim-cizgi .a.aktif .n{background:var(--brand);border-color:var(--brand);color:#20160a;box-shadow:0 0 0 4px var(--brand-ring)}
.adim-cizgi .a.aktif{color:var(--ink)}
.adim-cizgi .a.aktif::before{background:var(--ok)}
/* Skor gostergesi */
.skor{display:flex;align-items:center;gap:14px}
.skor-daire{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.28rem;flex:none;color:#fff}
.skor-daire.yesil{background:var(--ok)}
.skor-daire.sari{background:var(--warn)}
.skor-daire.turuncu{background:#ea7317}
.skor-daire.kirmizi{background:var(--err)}
.skor-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:6px}
.skor-bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
/* =====================================================================
ILAN DETAY
===================================================================== */
.ilan-layout{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start}
.galeri-ana{border-radius:var(--r-lg);overflow:hidden;background:#e9edf2;border:1px solid var(--line);aspect-ratio:16/10}
.galeri-ana img{width:100%;height:100%;object-fit:contain}
.galeri-kucuk{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.galeri-kucuk img{aspect-ratio:4/3;object-fit:cover;border-radius:9px;cursor:pointer;border:2px solid transparent}
.galeri-kucuk img.aktif{border-color:var(--brand)}
.ozellik-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
.ozellik-liste .o{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:.88rem}
.ozellik-liste .o span{color:var(--muted)}
.ozellik-liste .o b{font-weight:600}
.yan-fiyat{font-size:1.85rem;font-weight:800;letter-spacing:-.03em}
/* =====================================================================
PANEL (uye + admin)
===================================================================== */
.panel{display:grid;grid-template-columns:246px 1fr;gap:24px;align-items:start;padding:26px 0}
/* Menü KENDİ kaydırma kabı.
Önceki hâlde menü sayfayla birlikte uzuyordu: alttaki bir bölüme
ulaşmak için SAYFAYI aşağı kaydırmak gerekiyordu, tıklayınca yeni
sayfa en üstten açılıyor ve menü yine başa dönüyordu. Menüyü
ekrana sığdırıp kendi içinde kaydırınca bu tekrar ortadan kalkıyor;
kalan konum hafızasını menu-kaydir.js tutuyor. */
.panel-menu{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;
position:sticky;top:calc(var(--header-h) + 16px);
max-height:calc(100vh - var(--header-h) - 32px);
overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.panel-menu::-webkit-scrollbar{width:8px}
.panel-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid #fff}
.panel-menu::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
.panel-menu a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.panel-menu a:hover{background:var(--line-2)}
.panel-menu a.active{background:var(--ink);color:#fff}
.panel-menu .grup{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);padding:14px 13px 6px;font-weight:800}
.panel-menu .say{margin-left:auto;background:var(--brand);color:#20160a;border-radius:999px;padding:1px 7px;font-size:.72rem;font-weight:800}
.panel-menu a.active .say{background:var(--brand)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:16px;margin-bottom:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.stat span{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat b{display:block;font-size:1.75rem;letter-spacing:-.03em;margin-top:4px}
.stat .alt{font-size:.78rem;color:var(--muted-2);margin-top:2px}
.stat.brand{background:linear-gradient(135deg,var(--brand),var(--brand-600));border-color:var(--brand-600)}
.stat.brand span,.stat.brand .alt{color:#553f02}
.stat.brand b{color:#20160a}
a.stat{color:inherit;text-decoration:none;display:block;transition:border-color .15s,box-shadow .15s,transform .15s}
a.stat:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.07);transform:translateY(-1px)}
a.stat:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.filtre-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:18px}
.filtre-bar .form-group{margin:0;min-width:150px}
.bos-durum{text-align:center;padding:52px 20px;color:var(--muted)}
.bos-durum .ico{font-size:2.4rem;margin-bottom:10px;opacity:.5}
/* Admin ust cubuk */
.admin-top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:60}
.admin-top .container{display:flex;align-items:center;gap:20px;height:62px}
.admin-top .logo{color:#fff}
.admin-top .logo-mark{border-color:var(--brand);color:#fff}
.admin-top nav{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:.88rem}
.admin-top nav a{color:#cbd5e1;font-weight:600}
.admin-top nav a:hover{color:var(--brand)}
/* Yonetim ust cubugu dar ekranda tasmasin */
@media (max-width:640px){
.admin-top .container{gap:10px;height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.admin-top nav{gap:10px;font-size:.8rem;flex-wrap:wrap;justify-content:flex-end}
.admin-top .logo-yazi{display:none}
.admin-top .logo img{height:24px}
.admin-top nav .muted{display:none} /* yonetici adi dar ekranda gizlensin */
}
/* Zaman cizelgesi */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .tl{position:relative;padding-bottom:18px}
.timeline .tl::before{content:'';position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--brand)}
.timeline .tl .meta{font-size:.76rem;color:var(--muted-2)}
.timeline .tl .txt{font-size:.88rem;margin-top:2px}
/* Giris ekrani */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:linear-gradient(135deg,#0f172a,#1e293b)}
.auth-card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:36px;width:100%;max-width:430px}
.auth-card .logo{justify-content:center;margin-bottom:8px}
/* =====================================================================
FOOTER
===================================================================== */
.site-footer{background:var(--ink);color:#94a3b8;padding:52px 0 0;margin-top:64px}
.site-footer h4{color:#fff;font-size:.92rem;margin-bottom:14px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px;padding-bottom:36px}
.site-footer a{color:#94a3b8;font-size:.87rem;display:block;padding:4px 0}
.site-footer a:hover{color:var(--brand)}
.site-footer .logo{color:#fff;margin-bottom:12px}
.footer-alt{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:.8rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* Yapimci kunyesi — en alt satir */
.footer-yapimci{border-top:1px solid rgba(255,255,255,.07);padding:16px 0 22px;display:flex;justify-content:center}
.footer-yapimci a{
display:inline-flex;align-items:center;gap:9px;
color:#7c8798;font-size:.73rem;letter-spacing:.02em;
opacity:.82;transition:opacity .18s
}
.footer-yapimci a:hover,
.footer-yapimci a:focus-visible{opacity:1;color:#a9b3c2}
/* 17px'te "branding solutions" alt satiri okunmuyordu — logo genis
oranli (yaklasik 3,8:1) oldugu icin yukseklik dustukce alt satir
once bulaniklasiyor sonra kayboluyor. 23px, kunye olmaya devam
edecek kadar kucuk ama okunacak kadar buyuk. */
.footer-yapimci img{height:23px;width:auto;display:block}
@media (max-width:520px){
.footer-yapimci a{flex-direction:column;gap:6px;text-align:center}
}
/* Whatsapp buton */
.wa-fab{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:var(--sh-lg);z-index:80;font-size:1.5rem}
.wa-fab:hover{transform:scale(1.06)}
/* Yazdirma */
@media print{
/* Yazdirmada ekrana ait her sey gizlenir. cerez-bant ve cerez-pencere
de buraya DAHIL: sabit konumlu oldugu icin ciktida her sayfanin
altina basiliyor ve altinda kalan tablo satirini goturuyordu. */
.site-header,.site-footer,.topbar,.wa-fab,.no-print,.btn,
.cerez-bant,.cerez-pencere,.kars-cubuk,.g-ipucu{display:none!important}
body{background:#fff}
.card{box-shadow:none;border-color:#ccc}
}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width:1080px){
.hesap-layout{grid-template-columns:1fr}
.hesap-form{position:static}
.ilan-layout{grid-template-columns:1fr}
.search-fields{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.panel{grid-template-columns:1fr}
.panel-menu{position:static;display:flex;gap:6px;overflow-x:auto;
max-height:none;overflow-y:visible}
.panel-menu .grup{display:none}
.panel-menu a{white-space:nowrap}
.teklif{grid-template-columns:1fr;gap:14px}
.teklif-detay{grid-template-columns:repeat(2,1fr)}
}
/* Ana menu tam genisligi ~1040px ister; tabletlerde yatay tasmayi onlemek
icin hamburger menuye bu esikte geciyoruz. */
@media (max-width:1040px){
.main-nav{
display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
border-bottom:1px solid var(--line);flex-direction:column;padding:12px;gap:2px;box-shadow:var(--sh-lg)
}
.main-nav.acik{display:flex}
.nav-toggle{display:block;margin-left:auto}
.drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:12px}
.site-header .container{flex-wrap:nowrap}
.header-actions{margin-left:auto}
}
@media (max-width:720px){
.header-actions .gizle-mobil{display:none}
.g2,.g3,.g4,.steps,.form-grid,.ozellik-liste,.footer-grid{grid-template-columns:1fr}
.search-fields{grid-template-columns:1fr}
.topbar .links{display:none}
.topbar .container{justify-content:center}
.hero{padding:44px 0 60px}
.hero-stats{gap:22px}
.hero-stats .s{flex:1 1 40%}
.adim-cizgi .a{font-size:.7rem}
.galeri-kucuk{grid-template-columns:repeat(4,1fr)}
section.pad{padding:38px 0}
}
/* =====================================================================
ILAN LISTESI - GELISMIS FILTRE PANELI
===================================================================== */
.liste-layout{display:grid;grid-template-columns:288px 1fr;gap:24px;align-items:start}
.filtre-panel{position:sticky;top:calc(var(--header-h) + 14px);max-height:calc(100vh - var(--header-h) - 28px);overflow-y:auto;padding-right:4px}
.filtre-panel::-webkit-scrollbar{width:6px}
.filtre-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.filtre-kutu{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;margin-bottom:10px}
.filtre-kutu h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 10px;font-weight:800}
.filtre-kutu .form-group{margin-bottom:10px}
.filtre-kutu .form-group:last-child{margin-bottom:0}
.filtre-kutu .check{margin-bottom:7px;font-size:.85rem}
.filtre-kutu .check:last-child{margin-bottom:0}
.filtre-kutu select,.filtre-kutu input[type=text]{font-size:.86rem;padding:9px 11px}
.filtre-liste{display:flex;flex-direction:column;max-height:290px;overflow-y:auto;margin:0 -6px}
.filtre-liste a{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:7px;font-size:.86rem;color:var(--ink-2)}
.filtre-liste a:hover{background:var(--brand-soft);color:var(--brand-700)}
.filtre-liste a.aktif{background:var(--ink);color:#fff;font-weight:700}
.filtre-liste a span{color:var(--muted-2);font-size:.78rem;flex:none}
.filtre-liste a.aktif span{color:#cbd5e1}
.filtre-geri{display:block;font-size:.8rem;color:var(--brand-700);font-weight:600;margin-bottom:6px}
.filtre-aksiyon{position:sticky;bottom:0;background:linear-gradient(to bottom,rgba(247,248,250,0),var(--bg) 30%);padding:10px 0 4px}
.filtre-ac{display:none}
/* Aktif filtre rozetleri */
.rozet-serit{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtre-rozet{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
background:var(--brand-soft);border:1px solid #f0dda4;color:var(--brand-700);font-size:.8rem;font-weight:600}
.filtre-rozet:hover{background:var(--brand);color:#20160a;border-color:var(--brand)}
.filtre-rozet span{font-size:.9rem;line-height:1;opacity:.7}
/* Renk seçici */
.renk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.renk-kutu{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:7px;cursor:pointer;font-size:.78rem;border:1px solid transparent}
.renk-kutu:hover{background:var(--line-2)}
.renk-kutu.on{background:var(--brand-soft);border-color:#f0dda4;font-weight:700}
.renk-kutu input{position:absolute;opacity:0;pointer-events:none}
.renk-kutu i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(15,23,42,.18);flex:none}
.renk-kutu span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Etiket bulutu (SEO ic linkleme) */
.etiket-bulut{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.etiket-bulut a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
border:1px solid var(--line);font-size:.82rem;color:var(--ink-2);background:#fff}
.etiket-bulut a:hover{border-color:var(--brand);color:var(--brand-700)}
.etiket-bulut a span{color:var(--muted-2);font-size:.75rem}
@media (max-width:1080px){
.liste-layout{grid-template-columns:250px 1fr;gap:16px}
}
@media (max-width:860px){
.liste-layout{grid-template-columns:1fr}
.filtre-panel{position:fixed;inset:0;z-index:200;background:var(--bg);padding:16px;max-height:none;display:none}
.filtre-panel.acik{display:block}
.filtre-ac{display:block}
.filtre-aksiyon{position:sticky;bottom:0;background:var(--bg);padding:12px 0;box-shadow:0 -8px 20px rgba(15,23,42,.08)}
.renk-grid{grid-template-columns:repeat(3,1fr)}
}
.search-fields{grid-template-columns:repeat(6,1fr)}
.hizli-linkler{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.hizli-linkler a{font-size:.8rem;padding:4px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2);font-weight:600}
.hizli-linkler a:hover{background:var(--brand-soft);color:var(--brand-700)}
@media (max-width:1080px){.search-fields{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.search-fields{grid-template-columns:1fr}}
.filtre-kutu h4.mt-2{margin-top:18px}
.filtre-kutu .row + h4{margin-top:18px}
.liste-layout .arac-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
/* ============ ADMIN KATALOG YONETIMI ============ */
.katalog-layout{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.katalog-liste{display:flex;flex-direction:column;max-height:480px;overflow-y:auto;padding:6px}
.katalog-liste a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;font-size:.86rem;color:var(--ink-2)}
.katalog-liste a:hover{background:var(--line-2)}
.katalog-liste a.aktif{background:var(--ink);color:#fff;font-weight:700}
.katalog-liste a .say{color:var(--muted-2);font-size:.75rem;flex:none}
.katalog-liste a.aktif .say{color:#cbd5e1}
.katalog-liste .ad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-satir{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px}
.model-satir:hover{background:var(--line-2)}
.model-satir .check{flex:1;min-width:0}
.model-satir .check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1080px){.katalog-layout{grid-template-columns:1fr}}
/* =====================================================================
RAPORLAR
===================================================================== */
.rapor-bar{display:flex;align-items:flex-end;gap:14px;overflow-x:auto;padding:10px 2px 0}
.rb-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;flex:1}
.rb-val{font-size:.72rem;font-weight:700;color:var(--ink)}
.rb-bar{width:100%;max-width:54px;border-radius:8px 8px 0 0;
background:linear-gradient(180deg,var(--brand),#ffd968);border:1px solid rgba(0,0,0,.06);border-bottom:none}
.rb-lbl{font-size:.74rem;font-weight:600;color:var(--muted)}
.rapor-satir{margin-bottom:12px}
.rapor-satir:last-child{margin-bottom:0}
.rapor-cizgi{height:7px;border-radius:99px;background:var(--line-2);margin-top:5px;overflow:hidden}
.rapor-cizgi i{display:block;height:100%;border-radius:99px;background:var(--brand)}
/* =====================================================================
PESINAT VE VADE PANELI (ilan detay yan sutun)
===================================================================== */
.pv-panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-top:14px}
.pv-baslik{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.pv-satir{margin-bottom:20px}
.pv-satir:last-of-type{margin-bottom:16px}
.pv-etiket{font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:8px;display:block}
.pv-tutar{font-size:1.02rem;font-weight:800;color:var(--ink);white-space:nowrap}
/* --- kaydirici --- */
.pv-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
background:var(--line);outline:none;margin:6px 0 4px;cursor:pointer}
.pv-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
background:var(--ink);border:4px solid #fff;box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(15,23,42,.25);cursor:grab}
.pv-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ink);
border:4px solid #fff;box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(15,23,42,.25);cursor:grab}
.pv-slider:active::-webkit-slider-thumb{cursor:grabbing}
.pv-slider:focus-visible{box-shadow:0 0 0 3px var(--brand-ring)}
.pv-olcek{display:flex;justify-content:space-between;font-size:.74rem;font-weight:600;color:var(--muted);margin-bottom:6px}
/* --- akordiyon --- */
.pv-akordiyon{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pv-akordiyon summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:flex-start;
justify-content:space-between;gap:12px;font-size:.92rem}
.pv-akordiyon summary::-webkit-details-marker{display:none}
.pv-akordiyon summary::after{content:'⌄';font-size:1.25rem;line-height:1;color:var(--muted);
transition:transform .18s;flex:none;margin-top:-2px}
.pv-akordiyon[open] summary::after{transform:rotate(180deg)}
.pv-akordiyon summary b{display:block;color:var(--ink);font-size:.98rem}
.pv-akordiyon-alt{display:block;color:var(--muted);font-size:.85rem;margin-top:3px;line-height:1.45}
.pv-akordiyon-govde{padding:0 16px 14px;border-top:1px solid var(--line-2)}
.pv-liste{margin:12px 0 8px;padding-left:18px;font-size:.83rem;color:var(--ink-2);line-height:1.6}
.pv-liste li{margin-bottom:4px}
/* --- vade kartlari --- */
.pv-vadeler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pv-vade{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:12px 10px 12px 36px;cursor:pointer;transition:.15s;min-width:0;overflow:hidden}
.pv-vade input{position:absolute;opacity:0;pointer-events:none}
.pv-vade::before{content:'';position:absolute;left:10px;top:14px;width:18px;height:18px;border-radius:50%;
border:2px solid var(--line);background:#fff;transition:.15s}
.pv-vade.secili{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pv-vade.secili::before{border-color:var(--ink);border-width:5px}
.pv-vade:hover:not(.pasif){border-color:var(--muted-2)}
.pv-vade.pasif{opacity:.5;cursor:not-allowed;background:var(--line-2)}
.pv-vade-ic{display:block;line-height:1.35}
.pv-vade-ic b{font-size:.9rem;color:var(--ink)}
.pv-vade-tutar{display:block;font-size:.98rem;font-weight:700;color:var(--ink-2);margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-vade-banka{display:block;font-size:.7rem;color:var(--muted-2);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-ozet{text-align:center;margin-top:8px;line-height:1.5}
.pv-panel.yukleniyor{opacity:.55;pointer-events:none}
@media(max-width:400px){.pv-vadeler{grid-template-columns:1fr}}
/* Yonetici foto yonetimi */
.foto-yonet{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:12px}
.fy-kart{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#e9edf2}
.fy-kart.kapak{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring)}
.fy-kart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fy-rozet{position:absolute;top:6px;left:6px;background:var(--brand);color:var(--ink);font-size:.68rem;
font-weight:800;padding:3px 8px;border-radius:99px}
.fy-islem{display:flex;gap:6px;padding:8px;background:#fff;flex-wrap:wrap}
.fy-islem form{margin:0}
/* =====================================================================
FOTOGRAF DUZENLEYICI — suruklenerek siralama
Sira arac ilaninda satisin kendisi: 1 numara vitrindeki kapak.
Kart uzerindeki buyuk numara bu yuzden var — galeri "1234 diye
siralayabilmek" istedi, once numarayi gormesi gerekiyor.
===================================================================== */
.gd{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:#fff}
.gd-ust{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
flex-wrap:wrap;margin-bottom:10px}
.gd-ipucu{display:none}
.gd-suruklenebilir .gd-ipucu{display:inline}
.gd-izgara{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:10px}
.gd-kart{position:relative;border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;background:#e9edf2;touch-action:pan-y}
.gd-suruklenebilir .gd-kart{cursor:grab}
.gd-kart.gd-tasiniyor{opacity:.5;cursor:grabbing;outline:2px dashed var(--brand)}
.gd-kart.kapak{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring)}
.gd-kart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
-webkit-user-drag:none;user-select:none}
.gd-kart:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* Numara: koyu zemin uzerinde beyaz — acik fotografta da okunur */
.gd-no{position:absolute;top:6px;left:6px;z-index:2;min-width:26px;height:26px;
display:grid;place-items:center;border-radius:99px;background:rgba(15,23,42,.82);
color:#fff;font-size:.82rem;font-weight:800;padding:0 7px}
.gd-rozet{position:absolute;top:6px;right:6px;z-index:2;background:var(--brand);
color:var(--ink);font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:99px}
/* Eylemler kartin USTUNDE. Ilk surumde altta on bir dugmelik bir
duvar hâlinde diziliyorlardi ve hangi dugme hangi fotografa ait,
ancak numara okunarak anlasiliyordu. */
.gd-araclar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:4px;
padding:5px;background:linear-gradient(transparent,rgba(15,23,42,.66))}
.gd-suruklenebilir .gd-ok{display:none} /* suruklerken ok gereksiz */
.gd-dugme{flex:1;border:0;border-radius:7px;background:rgba(255,255,255,.92);
color:var(--ink);font-size:.92rem;line-height:1;padding:7px 0;cursor:pointer;
min-height:32px}
.gd-dugme:hover{background:#fff}
.gd-dugme[disabled]{opacity:.35;cursor:default}
.gd-sil:hover{background:var(--err);color:#fff}
.gd-gizli-form{display:none}
.gd-yardim{margin-left:auto}
.gd-alt{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gd-bekliyor{animation:gd-nabiz 1.4s ease-in-out infinite}
@keyframes gd-nabiz{50%{box-shadow:0 0 0 4px var(--brand-ring)}}
@media(prefers-reduced-motion:reduce){.gd-bekliyor{animation:none}}
/* Yuklemeden onceki onizleme */
.gd-onizleme{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(92px,100%),1fr));gap:6px}
.gd-on-kart{position:relative;display:block;border-radius:8px;overflow:hidden;background:#e9edf2}
.gd-on-kart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gd-on-kart .gd-no{min-width:21px;height:21px;font-size:.7rem;top:4px;left:4px}
@media(max-width:520px){
.gd-izgara{grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr))}
}
/* =====================================================================
EKSPERTIZ · BOYA-DEGISEN SEMASI
===================================================================== */
.eksp{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
@media(max-width:720px){.eksp{grid-template-columns:1fr;gap:18px}}
.eksp-sema-kutu{position:sticky;top:calc(var(--header-h) + 14px)}
.eksp-sema{width:100%;max-width:250px;margin:0 auto;display:block;height:auto}
.eksp-sema .eksp-parca rect{
fill:#dcfce7;stroke:#86efac;stroke-width:1.5;transition:fill .14s,stroke .14s
}
.eksp-sema .eksp-parca .eksp-kisa{
font-size:11px;font-weight:800;fill:#166534;pointer-events:none;
font-family:'Manrope',sans-serif
}
.eksp-sema .eksp-lokal rect{fill:#fef3c7;stroke:#fbbf24}
.eksp-sema .eksp-lokal .eksp-kisa{fill:#92400e}
.eksp-sema .eksp-boyali rect{fill:#ffedd5;stroke:#fb923c}
.eksp-sema .eksp-boyali .eksp-kisa{fill:#9a3412}
.eksp-sema .eksp-degismis rect{fill:#fee2e2;stroke:#f87171}
.eksp-sema .eksp-degismis .eksp-kisa{fill:#991b1b}
.eksp-sema .eksp-detay rect,.eksp-sema .eksp-detay circle{fill:#cbd5e1;opacity:.75}
.eksp-sema .eksp-serit .eksp-kisa{display:none}
.eksp-duzenle .eksp-parca{cursor:pointer}
.eksp-duzenle .eksp-parca:hover rect{stroke-width:3}
.eksp-duzenle .eksp-parca:focus-visible rect{stroke:var(--ink);stroke-width:3}
.eksp-parca.vurgu rect{stroke:var(--ink);stroke-width:3}
.eksp-ipucu{text-align:center;margin:10px 0 0;line-height:1.45}
.eksp-lejant{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem}
.eksp-lejant li{display:flex;align-items:center;gap:7px;color:var(--muted)}
.eksp-nokta{width:11px;height:11px;border-radius:3px;display:inline-block;border:1.5px solid}
.eksp-nokta.eksp-orijinal{background:#dcfce7;border-color:#86efac}
.eksp-nokta.eksp-lokal{background:#fef3c7;border-color:#fbbf24}
.eksp-nokta.eksp-boyali{background:#ffedd5;border-color:#fb923c}
.eksp-nokta.eksp-degismis{background:#fee2e2;border-color:#f87171}
.eksp-liste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
@media(max-width:560px){.eksp-liste{grid-template-columns:1fr}}
.eksp-liste li{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:7px 0;border-bottom:1px solid var(--line-2);font-size:.86rem;min-height:42px
}
.eksp-ad{color:var(--ink-2);min-width:0}
.eksp-kritik{color:var(--err,#dc2626);font-weight:900;margin-left:3px}
.eksp-durum{font-weight:700;white-space:nowrap;font-size:.8rem}
.eksp-liste li.eksp-orijinal .eksp-durum{color:#107a38} /* WCAG AA 4.90:1 */
.eksp-liste li.eksp-lokal .eksp-durum{color:#b45309}
.eksp-liste li.eksp-boyali .eksp-durum{color:#c2410c}
.eksp-liste li.eksp-degismis .eksp-durum{color:#b91c1c}
.eksp-secim{width:auto;min-width:132px;padding:5px 8px;font-size:.8rem;height:auto}
.eksp-rozetler{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
/* Ekspertiz puan gostergesi */
.eksp-puan{display:flex;align-items:center;gap:14px}
.eksp-puan-daire{
--p:0;width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;
background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line-2) 0);position:relative
}
.eksp-puan-daire::after{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--surface,#fff)}
.eksp-puan-daire b{position:relative;z-index:1;font-size:1.28rem;font-weight:800;line-height:1}
.eksp-puan-daire b small{display:block;font-size:.58rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
/* =====================================================================
DEGERLEME SONUCU
===================================================================== */
.dg-sonuc{
background:linear-gradient(135deg,var(--ink) 0%,#1e293b 100%);color:#fff;
border-radius:var(--r-lg);padding:28px;text-align:center
}
.dg-sonuc .dg-etiket{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}
.dg-orta{font-size:clamp(2rem,6vw,2.9rem);font-weight:800;letter-spacing:-.03em;color:var(--brand);margin:6px 0 2px;line-height:1}
.dg-aralik{font-size:.94rem;color:#cbd5e1}
.dg-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.14);margin:20px auto 8px;max-width:440px;position:relative}
.dg-bar i{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--brand);
border:3px solid var(--ink);left:50%;transform:translateX(-50%)}
.dg-bar-uc{display:flex;justify-content:space-between;max-width:440px;margin:0 auto;font-size:.78rem;color:#94a3b8}
.dg-guven{margin-top:16px;font-size:.84rem;color:#cbd5e1}
.dg-guven b{color:#fff}
.dg-teklif{
border:2px dashed var(--brand);border-radius:var(--r-lg);padding:20px;text-align:center;
background:var(--brand-soft)
}
.dg-teklif .t{font-size:1.7rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.dg-kirilim td.dg-art{color:#15803d;font-weight:700}
.dg-kirilim td.dg-eksi{color:#b91c1c;font-weight:700}
/* Arac govdesi ve tekerlekler */
.eksp-sema .eksp-govde rect{fill:#f1f5f9;stroke:#cbd5e1;stroke-width:1.5}
.eksp-sema .eksp-teker rect{fill:#475569;opacity:.55}
/* ---------------------------------------------------------------------
GENIS SEMA (motosiklet, ATV, elektrikli scooter)
Otomobil semasi DIKEY (ustten gorunum, 240x350) ve 250px'lik dar bir
sutuna oturuyor. Digerleri YATAY ya da kare; ayni dar sutuna
sokulunca parcalar ust uste biniyor ve araca benzemiyordu. Bu yuzden
o semalar listenin YANINA degil USTUNE, tam genislikte aliniyor.
Hangi kategorinin genis cizilecegini kategoriler.sema_dar soyluyor.
--------------------------------------------------------------------- */
.eksp-genis{grid-template-columns:1fr;gap:18px}
.eksp-genis .eksp-sema-kutu{position:static}
.eksp-genis .eksp-sema{max-width:560px}
.eksp-sema .eksp-teker circle{fill:#475569;opacity:.30}
.eksp-sema .eksp-detay circle{fill:#94a3b8;opacity:.75}
/* ---------------------------------------------------------------------
MENUDEKI KATEGORI ALT BASLIGI
Bes kategori acilir menude tek bir yiginla karisiyordu; kategoriler
kendi bolumunde, ustte duruyor.
--------------------------------------------------------------------- */
.drop-menu .drop-baslik{
display:block;padding:8px 16px 4px;font-size:.72rem;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b665c);
pointer-events:none
}
.drop-menu .drop-ayrac{display:block;height:1px;margin:6px 12px;background:var(--line-2,#eee)}
.drop-menu a.secili{font-weight:800;background:var(--line-2,#f5f4f0)}
.eksp-sema .eksp-detay rect,.eksp-sema .eksp-detay circle{fill:#94a3b8;opacity:.45}
.eksp-mini{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;text-decoration:none}
.eksp-mini:hover .tiny{color:var(--ink)}
/* Ana sayfa degerleme seridi */
.dg-serit{
display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center;
background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--r-xl);
padding:36px 40px;box-shadow:var(--sh)
}
.dg-serit h2{font-size:1.9rem;letter-spacing:-.03em;margin:6px 0 10px}
.dg-serit p{color:var(--muted);max-width:56ch;margin:0 0 16px}
.dg-serit-ozellik{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.dg-serit-ozellik span{
font-size:.79rem;font-weight:600;padding:5px 11px;border-radius:99px;
background:var(--brand-soft);color:var(--brand-700);border:1px solid rgba(255,201,38,.4)
}
.dg-serit-gorsel .eksp{grid-template-columns:1fr;gap:0}
.dg-serit-gorsel .eksp-yan{display:none}
.dg-serit-gorsel .eksp-sema-kutu{position:static}
.dg-serit-gorsel .eksp-sema{max-width:190px}
@media(max-width:860px){
.dg-serit{grid-template-columns:1fr;padding:28px 22px;gap:22px}
.dg-serit-gorsel{display:none}
}
/* =====================================================================
FIYAT KONUMU · TAKAS · GUVENCE
===================================================================== */
.fk-rozet{
display:flex;flex-direction:column;gap:1px;margin-top:10px;padding:9px 13px;
border-radius:10px;border:1px solid;font-size:.8rem;line-height:1.4
}
.fk-rozet b{font-size:.88rem}
.fk-rozet span{opacity:.85;font-size:.76rem}
.fk-yesil{background:#f0fdf4;border-color:#86efac;color:#166534}
.fk-yesil-acik{background:#f7fee7;border-color:#bef264;color:#3f6212}
.fk-mavi{background:#eff6ff;border-color:#93c5fd;color:#1e40af}
.fk-sari{background:#fffbeb;border-color:#fcd34d;color:#92400e}
.fk-turuncu{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.pv-takas{
display:flex;align-items:center;gap:12px;background:#f0fdf4;border:1px solid #86efac;
border-radius:10px;padding:11px 13px;margin-bottom:16px;position:relative
}
.pv-takas b{display:block;font-size:.86rem;color:#166534;line-height:1.3}
.pv-takas .tiny{color:#15803d;opacity:.85}
.pv-takas-tutar{margin-left:auto;font-weight:800;color:#166534;white-space:nowrap}
.pv-takas-sil{
position:absolute;top:5px;right:8px;color:#15803d;font-size:1.1rem;line-height:1;
text-decoration:none;opacity:.6
}
.pv-takas-sil:hover{opacity:1}
.pv-takas-cta{
display:block;background:var(--brand-soft);border:1px dashed var(--brand);border-radius:10px;
padding:11px 13px;margin-bottom:16px;font-size:.85rem;color:var(--ink);text-decoration:none
}
.pv-takas-cta:hover{background:#fff4d1}
.ilan-cta{display:grid;gap:7px;margin-top:10px}
.ilan-cta .btn{justify-content:flex-start;text-align:left;font-size:.86rem}
.guvence{list-style:none;padding:0;margin:14px 0 0;font-size:.82rem;line-height:1.6;color:var(--ink-2)}
.guvence li{margin-bottom:3px}
.guvence li.tiny{margin-top:6px}
/* Yildizlar */
.yildiz{display:inline-flex;gap:1px;color:var(--brand-600);font-size:1rem;line-height:1}
.yildiz i{font-style:normal;color:var(--line)}
.yildiz i.dolu{color:var(--brand-600)}
.yildiz i.yari{background:linear-gradient(90deg,var(--brand-600) 50%,var(--line) 50%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.yildiz-kucuk{font-size:.82rem}
/* Video */
.video-kutu{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:#000}
.video-kutu iframe,.video-kutu video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* TCO */
.tco-slider{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 10px}
.tco-slider .lbl{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
/* Yorum kartlari */
.yorum-kart{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
display:flex;flex-direction:column;gap:8px
}
.yorum-baslik{font-size:.95rem}
.yorum-kart p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.6;flex:1}
.yorum-alt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem}
.yorum-alt .tiny{width:100%}
/* =====================================================================
BUTCE ARAC BULUCU
===================================================================== */
.butce-liste{display:flex;flex-direction:column;gap:12px}
.butce-kart{
display:grid;grid-template-columns:150px 1fr 230px;gap:18px;align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;
text-decoration:none;color:inherit;transition:.16s
}
.butce-kart:hover{border-color:var(--brand);box-shadow:var(--sh)}
.bk-foto{border-radius:10px;overflow:hidden;background:#e9edf2;aspect-ratio:4/3}
.bk-foto img{width:100%;height:100%;object-fit:cover;display:block}
.bk-bilgi{display:flex;flex-direction:column;gap:5px;min-width:0}
.bk-bilgi b{font-size:1rem;line-height:1.35}
.bk-meta{font-size:.82rem;color:var(--muted)}
.bk-bilgi .badge{align-self:flex-start}
.bk-odeme{
display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;
border-left:1px solid var(--line-2);padding-left:16px
}
.bk-etiket{font-size:.74rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bk-taksit{font-size:1.35rem;font-weight:800;color:var(--brand-700);letter-spacing:-.02em;line-height:1.1}
.bk-fiyat{margin-top:6px;font-size:.86rem;font-weight:700;color:var(--ink)}
@media(max-width:820px){
.butce-kart{grid-template-columns:110px 1fr}
.bk-odeme{grid-column:1/-1;border-left:none;border-top:1px solid var(--line-2);
padding:10px 0 0;align-items:flex-start;text-align:left}
}
/* Rezervasyon kosullari */
.rez-kosul{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-top:6px}
.rez-kosul b{display:block;margin-bottom:6px;font-size:.9rem}
.rez-kosul ul{margin:0;padding-left:18px;font-size:.85rem;color:var(--ink-2);line-height:1.65}
/* Randevu saatleri */
.saat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(88px,100%),1fr));gap:8px;margin-top:8px}
.saat{position:relative;display:block}
.saat input{position:absolute;opacity:0;pointer-events:none}
.saat span{
display:block;text-align:center;padding:11px 6px;border:1px solid var(--line);border-radius:10px;
background:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:.14s;
font-variant-numeric:tabular-nums
}
.saat span:hover{border-color:var(--muted-2)}
.saat input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.saat input:focus-visible + span{box-shadow:0 0 0 3px var(--brand-ring)}
.saat.dolu span{background:var(--line-2);color:var(--muted-2);cursor:not-allowed;text-decoration:line-through}
/* Satis evrak adimlari */
.adim{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);margin:0}
.adim:last-child{border-bottom:none}
.adim-kutu{
width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--line);background:#fff;
cursor:pointer;font-weight:900;color:#fff;line-height:1;display:grid;place-items:center;padding:0;font-size:.85rem
}
.adim.tamam .adim-kutu{background:var(--ok);border-color:var(--ok)}
.adim-ad{font-size:.92rem;line-height:1.4}
.adim.tamam .adim-ad{color:var(--muted);text-decoration:line-through}
.adim-ad .tiny{display:block;text-decoration:none}
/* Uzun URL / anahtar gibi bolunemeyen metinler kutuyu tasirmasin */
code, pre, .kirilabilir{overflow-wrap:anywhere; word-break:break-word}
pre{overflow-x:auto; max-width:100%}
input[readonly]{text-overflow:ellipsis}
/* Kucuk sutun grafikleri (aylik masraf, gunluk basvuru) */
.mini-grafik{display:flex; align-items:flex-end; gap:6px; overflow-x:auto; padding-bottom:2px}
.mini-grafik > *{flex:1 1 0; min-width:22px; text-align:center}
@media (max-width:520px){ .mini-grafik{gap:3px} .mini-grafik .tiny{font-size:.62rem} }
/* =====================================================================
YAN SUTUNLU DUZENLER
Satir ici grid-template-columns kullanmayin: medya sorgulari onu ezemez,
sayfa tablet/telefonda yatay tasar. Bunun yerine bu siniflari kullanin.
===================================================================== */
.yan-sag{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
.yan-sol{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.yan-sag > *, .yan-sol > *{min-width:0}
@media (max-width:1080px){
.yan-sag,.yan-sol{grid-template-columns:1fr}
.yan-sol > *:first-child{order:2} /* dar ekranda ozet asagi insin */
}
/* =====================================================================
IZGARA TASMA KORUMASI
---------------------------------------------------------------------
Izgara/esnek kutu cocuklarinin varsayilan min-width degeri "auto"dur;
icindeki genis bir tablo kolonu daralmayi engelleyip tum sayfayi
yatayda tasirir (telefonda sayfa kucuk acilir). Sifirlanmasi gerekir.
===================================================================== */
.ilan-layout > *, .hesap-layout > *, .panel > *, .katalog-layout > *,
.grid > *, .g2 > *, .g3 > *, .g4 > *, .eksp > *,
.stat-grid > *, .form-grid > *, .row > * { min-width: 0 }
/* Genis icerik kendi kutusunda kaysin, sayfayi tasirmasin */
.table-wrap { max-width: 100% }
.tbl { min-width: 0 }
/* =====================================================================
ERISILEBILIRLIK (WCAG 2.1 AA)
===================================================================== */
/* Klavye kullanicilari icin "icerige gec" baglantisi */
.atla-link{
position:absolute;left:-9999px;top:0;z-index:9999;
background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
font-weight:700;text-decoration:none
}
.atla-link:focus{left:0}
/* Her odaklanabilir ogede gorunur odak halkasi */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--brand);outline-offset:2px;border-radius:4px
}
/* Koyu zeminlerde odak halkasi beyaz olsun */
.site-footer a:focus-visible,.topbar a:focus-visible,.wa-fab:focus-visible{
outline-color:#fff
}
/* Ekran okuyucuya ozel metin */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.sr-only:focus{
position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal
}
/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important
}
}
/* Yuksek kontrast tercihi */
@media (prefers-contrast: more){
:root{--muted:#3d4650;--muted-2:#4a545f;--line:#8a939c}
.badge{border:1px solid currentColor}
}
/* Dokunma hedefi en az 44px (WCAG 2.5.5) */
@media (pointer: coarse){
.btn,.nav-toggle,.main-nav > a,.drop-menu a,.saat label{min-height:44px}
}
/* =====================================================================
ÇEREZ ONAY BANDI VE TERCİH PENCERESİ
===================================================================== */
.cerez-bant{
position:fixed;left:0;right:0;bottom:0;z-index:1200;
background:#fff;border-top:3px solid var(--brand);
box-shadow:0 -8px 30px -12px rgba(15,23,42,.35);
animation:cerezGir .25s ease-out
}
@keyframes cerezGir{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cerez-ic{
max-width:1180px;margin:0 auto;padding:18px 24px;
display:flex;gap:24px;align-items:center;flex-wrap:wrap
}
.cerez-metin{flex:1 1 420px;min-width:0}
.cerez-metin > b{display:block;margin-bottom:3px} /* yalnizca baslik blok; metin icindeki satir ici kalir */
.cerez-metin p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.55}
.cerez-dugmeler{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
/* Reddet ve Kabul aynı ağırlıkta olmalı (karanlık desen değil) */
.cerez-dugmeler .btn{min-width:104px;justify-content:center}
.cerez-katman{
position:fixed;inset:0;z-index:1300;background:rgba(15,23,42,.55);
display:flex;align-items:center;justify-content:center;padding:16px;
overflow-y:auto
}
.cerez-pencere{
background:#fff;border-radius:var(--r-lg);max-width:560px;width:100%;
box-shadow:var(--sh-lg);max-height:92vh;display:flex;flex-direction:column
}
.cerez-p-ust{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:18px 22px;border-bottom:1px solid var(--line)
}
.cerez-p-ust h3{margin:0;font-size:1.05rem}
.cerez-kapat{
background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--muted);
width:34px;height:34px;border-radius:8px;line-height:1
}
.cerez-kapat:hover{background:var(--line-2);color:var(--ink)}
.cerez-p-govde{padding:18px 22px;overflow-y:auto;flex:1}
.cerez-p-alt{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 22px;border-top:1px solid var(--line);background:var(--line-2);
border-radius:0 0 var(--r-lg) var(--r-lg);flex-wrap:wrap
}
.cerez-grup{
border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:12px
}
.cerez-g-ust{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px
}
.cerez-baglanti{
background:none;border:0;padding:0;color:inherit;text-decoration:underline;
cursor:pointer;font:inherit
}
/* Aç/kapa anahtarı */
.cerez-anahtar{position:relative;display:inline-block;width:46px;height:26px;flex:none}
.cerez-anahtar input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cerez-anahtar span{
position:absolute;inset:0;background:var(--line);border-radius:999px;
transition:background .18s;pointer-events:none
}
.cerez-anahtar span::before{
content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
background:#fff;border-radius:50%;transition:transform .18s;
box-shadow:0 1px 3px rgba(0,0,0,.25)
}
.cerez-anahtar input:checked + span{background:var(--ok)}
.cerez-anahtar input:checked + span::before{transform:translateX(20px)}
.cerez-anahtar input:focus-visible + span{outline:3px solid var(--brand);outline-offset:2px}
@media (max-width:720px){
.cerez-ic{padding:16px;gap:14px}
.cerez-dugmeler{width:100%}
.cerez-dugmeler .btn{flex:1 1 auto}
.cerez-p-alt{flex-direction:column;align-items:stretch}
.cerez-p-alt .row{width:100%}
.cerez-p-alt .btn{flex:1}
}
/* ===================== TAKSIT SECENEKLERI ===================== */
.pv-kampanya{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin:0 0 14px;padding:10px 12px;border-radius:10px;
background:linear-gradient(90deg,rgba(255,201,38,.18),rgba(255,201,38,.05));
border:1px solid rgba(255,201,38,.45)
}
.pv-kampanya-rozet{font-weight:700;font-size:.9rem}
.pv-kampanya .tiny{color:var(--muted)}
.pv-secenekler{display:flex;flex-direction:column;gap:8px}
.pv-secenekler .pv-akordiyon summary .badge{margin-left:6px;vertical-align:2px}
.pv-kapali summary{padding:8px 12px}
.pv-kapali[open]{background:var(--yuzey-2)}
/* Simulator */
.sim-duzen{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start}
.sim-kontrol{position:sticky;top:88px}
.sim-kart{
border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--yuzey);
display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .15s,box-shadow .15s
}
.sim-kart:hover{border-color:var(--brand)}
.sim-kart.secili{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,201,38,.25)}
.sim-kart.pasif{opacity:.55;cursor:default}
.sim-kart.pasif:hover{border-color:var(--line)}
.sim-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px}
.sim-taksit{font-size:1.35rem;font-weight:800;line-height:1.1}
.sim-taksit small{font-size:.72rem;font-weight:600;color:var(--muted)}
.sim-etiket{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700;font-size:.95rem}
.sim-satir{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--muted)}
.sim-satir b{color:var(--ink);font-weight:600}
.sim-plan-sar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sim-plan{width:100%;min-width:560px;border-collapse:collapse;font-size:.85rem}
.sim-plan th,.sim-plan td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.sim-plan th:first-child,.sim-plan td:first-child,
.sim-plan th:nth-child(2),.sim-plan td:nth-child(2){text-align:left}
.sim-plan thead th{background:var(--yuzey-2);font-weight:600;color:var(--muted);position:sticky;top:0}
.sim-plan tr.satir-balon td{background:rgba(255,201,38,.14);font-weight:700}
.sim-plan tr.satir-ara td{background:rgba(56,161,105,.10)}
.sim-plan tr.satir-odemesiz td{background:var(--yuzey-2);color:var(--muted);font-style:italic}
.sim-ozet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin-bottom:16px}
.sim-ozet-kutu{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--yuzey)}
.sim-ozet-kutu span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sim-ozet-kutu b{display:block;font-size:1.12rem;margin-top:2px}
@media (max-width:900px){
.sim-duzen{grid-template-columns:1fr}
.sim-kontrol{position:static}
}
@media print{
.sim-kontrol,.ust,.alt,.sim-yazdirma-gizle{display:none!important}
.sim-duzen{grid-template-columns:1fr}
.sim-plan{min-width:0;font-size:.75rem}
}
/* Yonetim formlarinda alan gruplari */
.alan-grubu{
border:1px solid var(--line);border-radius:12px;padding:16px 18px 4px;
margin:0 0 22px;background:var(--yuzey)
}
.alan-grubu > legend{
padding:0 8px;font-size:.85rem;font-weight:700;letter-spacing:.02em;
text-transform:uppercase;color:var(--muted)
}
.alan-grubu hr{margin:14px 0;border:0;border-top:1px solid var(--line)}
/* ===================== EKLENTILER PANELI ===================== */
.stat.vurgu.stat-yesil{border-color:var(--ok);background:var(--ok-soft)}
.stat.vurgu.stat-sari{border-color:var(--brand-600);background:rgba(255,201,38,.14)}
.stat.vurgu.stat-kirmizi{border-color:var(--err);background:var(--err-soft)}
.ek-suzgec{display:flex;flex-wrap:wrap;gap:8px}
.ek-etiket{
display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;
border:1px solid var(--line);background:#fff;color:var(--ink);
font-size:.85rem;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s
}
.ek-etiket:hover{border-color:var(--brand-600)}
.ek-etiket.aktif{background:var(--brand);border-color:var(--brand-600);color:#20160a}
.ek-etiket .tiny{opacity:.7;font-weight:500}
.eklenti-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px}
.eklenti-kart{
border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r-lg);
background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0
}
.eklenti-kart.durum-yesil{border-left-color:var(--ok)}
.eklenti-kart.durum-sari{border-left-color:var(--brand-600)}
.eklenti-kart.durum-kirmizi{border-left-color:var(--err)}
.eklenti-kart.durum-mavi{border-left-color:var(--info,#2f80ed)}
.eklenti-kart.durum-gri{border-left-color:var(--line-2);background:var(--yuzey-2)}
.ek-ust{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ek-ad{font-size:1rem;line-height:1.3}
.ek-aciklama{font-size:.84rem;color:var(--muted);margin:0;line-height:1.5}
.ek-bilgi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:8px 14px;margin:0}
.ek-bilgi > div{min-width:0}
.ek-bilgi dt{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ek-bilgi dd{margin:1px 0 0;font-size:.84rem;font-weight:600;overflow-wrap:anywhere}
.ek-mesaj{
margin:0;font-size:.78rem;color:var(--muted);background:var(--yuzey-2);
border-radius:8px;padding:7px 10px;overflow-wrap:anywhere
}
.ek-mesaj.hatali{background:var(--err-soft);color:#a91b12}
.ek-mesaj code{font-size:.74rem;background:none;padding:0}
.ek-alt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.ek-alt form{margin:0}
.ek-anahtar{
position:relative;width:46px;height:26px;flex:none;border:0;padding:0;cursor:pointer;
border-radius:999px;background:var(--line-2);transition:background .15s
}
.ek-anahtar.acik{background:var(--ok)}
.ek-anahtar:disabled{opacity:.5;cursor:not-allowed}
.ek-anahtar-top{
position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s
}
.ek-anahtar.acik .ek-anahtar-top{transform:translateX(20px)}
.ek-anahtar:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (max-width:520px){
.eklenti-izgara{grid-template-columns:1fr}
}
.panel-menu .say.say-uyari{background:var(--err);color:#fff}
/* ===================== MUSTERI ADINA SORGU ===================== */
.kart-uyari{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(255,201,38,.18)}
.riza-metin{
margin:0 0 16px;padding:14px 16px;border-left:3px solid var(--brand);
background:var(--yuzey-2);border-radius:0 8px 8px 0;
font-size:.86rem;line-height:1.65;color:var(--ink)
}
tr.satir-secili td{background:var(--ok-soft)}
tr.satir-pasif td{opacity:.6}
.alert-bilgi{background:var(--info-soft);border-color:#9dc2f0;color:#134f96}
/* Ekspertiz rapor dosyalari */
.eksp-dosyalar{padding:14px 18px;border-top:1px solid var(--line);background:var(--yuzey-2)}
.eksp-dosya-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.eksp-dosya-liste li{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:0
}
.eksp-dosya-liste li > a:first-child{
display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;flex:1
}
.eksp-dosya-liste li > a:first-child:hover b{text-decoration:underline}
.eksp-dosya-liste li > a:first-child > span:last-child{display:flex;flex-direction:column;min-width:0}
.eksp-dosya-liste li b{font-size:.9rem;overflow-wrap:anywhere}
.eksp-dosya-simge{font-size:1.35rem;flex:none}
/* Fatura ve mutabakat */
.fatura-ust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.fatura-ust p{font-size:.88rem;line-height:1.6}
tr.satir-uyari td{background:rgba(255,201,38,.14)}
.tbl.compact input,.tbl.compact select{margin:0;padding:6px 8px;font-size:.85rem}
@media print{
.panel-menu,.panel-ust,.card-foot,.filtre-bar,.btn{display:none!important}
.card{border:0;box-shadow:none}
}
.oran-cubuk{background:var(--yuzey-2);border-radius:999px;height:8px;overflow:hidden;min-width:60px}
.oran-cubuk span{display:block;height:100%;border-radius:999px}
.oran-cubuk .yesil{background:var(--ok)}
.oran-cubuk .kirmizi{background:var(--err)}
/* ===================== ARAC TALEBI ===================== */
.talep-duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:36px;align-items:start}
.talep-lead{font-size:1.05rem;line-height:1.7;color:var(--muted);max-width:56ch}
.talep-basari{max-width:760px;margin:0 auto;text-align:center}
.talep-basari-simge{font-size:3rem;line-height:1;margin-bottom:8px}
.talep-basari .arac-grid{text-align:left;margin-top:18px}
@media (max-width:900px){ .talep-duzen{grid-template-columns:1fr;gap:24px} }
/* ===================== BILGI MERKEZI ===================== */
.bilgi-arama{display:flex;gap:8px;margin:0 0 20px;max-width:620px}
.bilgi-arama input{flex:1;margin:0}
.bilgi-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
.bilgi-kart{
display:flex;flex-direction:column;gap:8px;min-width:0;
border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:#fff;
text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s
}
.bilgi-kart:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.bilgi-kart b{font-size:1.02rem;line-height:1.35}
.bilgi-kart .badge{align-self:flex-start}
.bilgi-kart > span:last-child{margin-top:auto;color:var(--brand-700);font-weight:600}
.bilgi-yazi{max-width:72ch}
.bilgi-yazi h1{margin:10px 0 6px;line-height:1.25}
.bilgi-ozet{font-size:1.08rem;line-height:1.65;color:var(--muted)}
.bilgi-govde{margin-top:22px;font-size:1rem;line-height:1.8}
.bilgi-govde h2{font-size:1.2rem;margin:30px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.bilgi-govde h2:first-child{border-top:0;padding-top:0;margin-top:0}
.bilgi-govde p{margin:0 0 14px}
.bilgi-govde a{color:var(--brand-600);font-weight:600}
.bilgi-etiketler{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.bilgi-oy{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--yuzey-2)}
.bilgi-cta{
border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
background:linear-gradient(135deg,rgba(255,201,38,.12),transparent);margin:28px 0
}
.oneri-serit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:10px;border-top:1px dashed var(--line)}
.oneri-rozet{
display:inline-block;padding:5px 10px;border-radius:999px;background:var(--ok-soft);
color:#0b6e3f;font-size:.78rem;font-weight:600;text-decoration:none
}
.oneri-rozet:hover{background:var(--ok);color:#fff}
/* =====================================================================
1) EKSIK YARDIMCI SINIFLAR
===================================================================== */
.gap-1{gap:8px}
.gap-2{gap:14px}
.gap-3{gap:22px}
.sayfa-basligi{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.15rem);line-height:1.2;margin:0 0 10px}
.bolum-basligi,.bolum-baslik{
font-size:1.22rem;line-height:1.3;margin:32px 0 16px;
display:flex;align-items:center;gap:10px
}
.bolum-basligi:first-child,.bolum-baslik:first-child{margin-top:0}
/* Kirinti (breadcrumb) */
.kirinti{
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
margin:0 0 14px;color:var(--muted-2)
}
.kirinti a{color:var(--muted);text-decoration:none}
.kirinti a:hover{color:var(--brand-700);text-decoration:underline}
.kirinti span{color:var(--ink-2)}
.badge-sari-acik{background:var(--brand-soft);color:var(--brand-700)}
/* =====================================================================
2) IKONLAR — yalnizca logo renkleri
Renkli emoji yerine tek renk SVG. Ikon rengini metinden alir.
===================================================================== */
.ikon{
flex:none;vertical-align:-.22em;
color:inherit; /* rengi baglamdan devralir */
}
.ikon-marka{color:var(--brand-600)}
.ikon-koyu{color:var(--logo-ink)}
.ikon-soluk{color:var(--muted-2)}
.ikon-ok{color:var(--ok)}
.ikon-uyari{color:var(--warn)}
.ikon-hata{color:var(--err)}
.ikon-metin{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ikon-metin > span{min-width:0}
/* Yuvarlak ikon kabi — kart basliklarinda */
.ikon-kabi{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;flex:none;border-radius:11px;
background:linear-gradient(140deg,var(--brand-soft),#fff);
border:1px solid #f2e2b4;color:var(--brand-700)
}
.ikon-kabi.koyu{
background:linear-gradient(140deg,#3a4048,var(--logo-ink));
border-color:#2a2f36;color:var(--brand)
}
/* Butonlarin icindeki ikon butonun metin rengini alir */
.btn .ikon{width:17px;height:17px}
.btn-brand .ikon{color:#20160a}
/* Panel menusunde ikon: pasifken soluk, aktifken marka */
.panel-menu a .ikon{color:var(--muted-2);transition:color .15s}
.panel-menu a:hover .ikon{color:var(--brand-700)}
.panel-menu a.active .ikon{color:var(--brand)} /* koyu hapin uzerinde marka sarisi */
/* =====================================================================
3) GRADYANLAR
Palet logodan cikmaz: sari #FFC926 · koyu #333333
Her gradyan bu iki rengin tonlarindan turetilir; ucuncu bir renk
girmez. Yuzeyler cok acik tonda tutulur ki metin okunakliligi
(WCAG AA) korunsun.
===================================================================== */
:root{
/* Marka tonlari */
--grad-marka:linear-gradient(135deg,#ffd75e 0%,var(--brand) 45%,var(--brand-600) 100%);
--grad-marka-yumusak:linear-gradient(135deg,#fffaea 0%,#fff3cd 100%);
--grad-koyu:linear-gradient(150deg,#3d444d 0%,var(--logo-ink) 55%,#242830 100%);
--grad-yuzey:linear-gradient(170deg,#ffffff 0%,#fcfcfd 100%);
/* Koyu zemin uzerinde ince sari isik */
--grad-koyu-isik:radial-gradient(1100px 420px at 78% -10%,rgba(255,201,38,.20),transparent 62%);
}
/* --- Sayfa zemini: cok hafif dikey gecis --- */
body{
background:
radial-gradient(760px 340px at 88% -8%,rgba(255,201,38,.10),transparent 60%),
linear-gradient(180deg,#fbfcfd 0%,var(--bg) 340px);
background-attachment:scroll;
background-repeat:no-repeat;
}
/* --- Kartlar: duz beyaz yerine cok ince gecis + yumusak golge --- */
.card,.stat,.arac-card,.feature,.step,.filtre-bar,.panel-menu{
background:var(--grad-yuzey);
}
.card{box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px -16px rgba(15,23,42,.18)}
.card:hover{box-shadow:0 1px 2px rgba(15,23,42,.06),0 14px 34px -18px rgba(15,23,42,.22)}
/* --- Butonlar ---
SIRA ONEMLI: once genel .btn, sonra varyantlar. Hepsi ayni ozgullukte
(0,1,0) oldugu icin sonra gelen kazanir; .btn en sona yazilirsa butun
renkli varyantlari ezer ve sari butonlar koyuya doner. */
/* DIKKAT: gradyanlar background-image ile verilir, background KISAYOLU
ile DEGIL. Kisayol background-color'i seffafa cekiyordu; gradyanin
cizilmedigi durumlarda (yazdirma, forced-colors kipi, gradyan destegi
olmayan tarayici) beyaz metin beyaz zeminde kaliyor ve dugme
okunamiyordu. Once duz renk, sonra uzerine gradyan. */
.btn{background-color:var(--ink);background-image:var(--grad-koyu)}
.btn-ghost{background-color:var(--card);background-image:var(--grad-yuzey)}
.btn-soft{background-color:var(--brand-soft);background-image:var(--grad-marka-yumusak)}
.btn-danger{background-color:var(--err);background-image:linear-gradient(135deg,#e8503f,var(--err))}
.btn-ok{background-color:var(--ok);background-image:linear-gradient(135deg,#17b366,var(--ok))}
.btn-brand{
background-color:var(--brand);
background-image:var(--grad-marka);
border-color:rgba(169,127,5,.28);
box-shadow:0 1px 2px rgba(169,127,5,.18)
}
.btn-brand:hover{
background-color:var(--brand-600);
background-image:linear-gradient(135deg,var(--brand) 0%,var(--brand-600) 55%,var(--brand-700) 100%);
box-shadow:0 6px 18px -6px rgba(234,179,8,.55)
}
/* --- Ust bar / kahraman alani --- */
.hero{background-image:var(--grad-koyu-isik),var(--grad-koyu)}
/* --- Panel ust seridi --- */
.panel-ust,.admin-top{background-image:var(--grad-koyu-isik),var(--grad-koyu)}
/* --- Vurgulu istatistik kutusu --- */
.stat.brand{
background:var(--grad-marka);
border-color:rgba(169,127,5,.30);
box-shadow:0 8px 26px -14px rgba(234,179,8,.65)
}
/* --- Bolum basliklarinda ince marka cizgisi --- */
.bolum-basligi::before,.bolum-baslik::before{
content:"";flex:none;width:4px;height:1.05em;border-radius:2px;
background:var(--grad-marka)
}
/* --- Rozetler: duz zemin yerine ince gecis --- */
.badge-sari-acik{background:var(--grad-marka-yumusak)}
/* --- Alt bilgi --- */
/* DIKKAT: .alt bu projede istatistik kartinin ALT YAZISIDIR (.stat .alt),
alt bilgi degil. Alt bilgi .site-footer'dir. Ciplak .alt'a zemin
vermek butun istatistik alt yazilarini koyu bloga cevirir. */
.site-footer{background-image:var(--grad-koyu-isik),var(--grad-koyu)}
/* --- Kart basliklari: ustte ince marka seridi --- */
.card-head{
background:linear-gradient(180deg,rgba(255,201,38,.055),transparent);
border-bottom:1px solid var(--line)
}
/* --- Eklenti kartlari --- */
.eklenti-kart{background:var(--grad-yuzey)}
.eklenti-kart.durum-gri{background:linear-gradient(170deg,#fbfbfc,#f5f6f8)}
/* --- Bilgi merkezi kartlari --- */
.bilgi-kart{background:var(--grad-yuzey)}
.bilgi-kart:hover{background:linear-gradient(170deg,#fffdf6,#fff9e9)}
/* --- Simulator secili kart --- */
.sim-kart.secili{background:var(--grad-marka-yumusak)}
/* --- Cerez bandi --- */
.cerez-bant{background-image:var(--grad-yuzey)}
/* Hareket azaltma tercihi: gradyanlar kalir, gecisler kalkar */
@media (prefers-reduced-motion:reduce){
.card,.card:hover,.btn,.btn:hover{transition:none}
}
/* Yuksek karsitlik tercihi: gradyanlari duz renge indir */
@media (prefers-contrast:more){
body{background:var(--bg)}
.card,.stat,.arac-card,.feature,.step,.filtre-bar,.panel-menu,
.eklenti-kart,.bilgi-kart,.btn-ghost{background:#fff}
.btn-brand,.stat.brand{background:var(--brand)}
.btn{background:var(--logo-ink)}
.card-head{background:none}
}
/* =====================================================================
4) KENAR BOSLUKLARI
Sabit 20px her ekranda ayni duruyordu; genis ekranda icerik kenara
yapisik, dar ekranda ise gereginden genis gorunuyordu. Boslugu ekran
genisligiyle birlikte buyuyen tek bir degiskene bagliyoruz.
===================================================================== */
:root{ --kenar:18px }
@media (min-width:600px){ :root{ --kenar:26px } }
@media (min-width:1024px){ :root{ --kenar:34px } }
@media (min-width:1440px){ :root{ --kenar:44px } }
.container{padding-left:var(--kenar);padding-right:var(--kenar)}
/* Yonetim paneli: menu ile icerik arasindaki bosluk da ekranla buyusun */
.panel{gap:clamp(18px,2.2vw,30px);padding:clamp(20px,2.4vw,32px) 0}
/* Kart ic boslugu dar ekranda biraz daralsin ki metin kenara yapismasin */
@media (max-width:520px){
.card-body{padding:18px}
.card-head,.card-foot{padding:14px 18px}
.stat{padding:16px}
}
/* Tam genislikte duran seritler (tablo, filtre) kenar boslugunu korusun */
.table-wrap{margin-left:calc(var(--kenar) * -.35);margin-right:calc(var(--kenar) * -.35);padding-left:calc(var(--kenar) * .35);padding-right:calc(var(--kenar) * .35)}
@media (min-width:768px){ .table-wrap{margin:0;padding:0} }
/* =====================================================================
5) KOYU ZEMINDE OKUNAKLILIK
.muted / .tiny gibi soluk siniflar koyu seritlerde (panel ust bandi,
kahraman alani, alt bilgi) acik zemin icin secilmis gri kalir ve
okunmaz. Koyu zeminde acik griye cevrilir.
===================================================================== */
.admin-top .muted,.admin-top .tiny,.panel-ust .muted,.panel-ust .tiny,
.site-footer .muted,.hero .muted{color:#c3ccd6}
.admin-top nav a,.admin-top nav span,
.panel-ust nav a,.panel-ust nav span{color:#dde3ea}
.admin-top nav a:hover,.panel-ust nav a:hover{color:var(--brand)}
/* Yesil rozet metnini bir tik koyulastir (4.36 -> 5.1) */
.badge-yesil-acik{color:#0d6f4a}
/* Sari vurgulu satirlarda soluk metin kullanma — ana metin rengine cek */
tr.satir-uyari .muted,tr.satir-uyari .tiny,
.sim-plan tr.satir-balon .muted,.sim-plan tr.satir-balon .tiny,
.stat.vurgu .alt,.stat.vurgu > span{color:var(--ink-2)}
/* Banka kimlik rengi: metinde degil, yanindaki noktada.
Kurum renkleri (turkuaz, acik mavi...) beyaz uzerinde cogu zaman
WCAG esigini gecmez; metni her zaman okunur tonda tutariz. */
.banka-ad{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.banka-nokta{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* Koyu seritteki hayalet buton: beyaz zemin yerine saydam cerceve */
.admin-top .btn-ghost,.panel-ust .btn-ghost,.site-footer .btn-ghost{
background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.30)
}
.admin-top .btn-ghost:hover,.panel-ust .btn-ghost:hover,.site-footer .btn-ghost:hover{
background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)
}
/* Aktif menu ogesi: logo koyusu + solda marka seridi */
.panel-menu a.active{
background:var(--grad-koyu);
box-shadow:inset 3px 0 0 var(--brand)
}
/* =====================================================================
6) ANA MENU — tasma onlemi
Ust satirda 5 oge var; yine de dar ekranda sikismasin diye menu
ogeleri satira BOLUNMEZ, boslugu ekranla birlikte daralir.
===================================================================== */
.main-nav{gap:2px;flex-wrap:nowrap;min-width:0}
.main-nav > a,.main-nav > .drop > a{
white-space:nowrap; /* "Bilgi Merkezi" iki satira inmesin */
padding:9px clamp(8px,1vw,14px)
}
.main-nav > .drop{flex:none}
/* Marka menusu: sitenin adi oldugu icin biraz daha belirgin */
.drop-marka{font-weight:700;letter-spacing:-.01em}
.main-nav > .drop > a.drop-marka.active{color:var(--brand-700)}
/* Genis acilir menu — kurumsal basliklar icin */
.drop-genis{min-width:252px;right:0;left:auto}
/* Giriş açılır menüsü — sağ kenara yaslanır, iki satırlı öğe taşır. */
.drop-giris{min-width:238px;right:0;left:auto}
.drop-giris a{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.drop-giris a b{font-weight:700;color:var(--ink)}
.drop-giris a:hover b{color:var(--brand-700)}
/* Hamburger menüdeki giriş bağlantıları — yalnız dar ekranda.
Açma kuralı HEMEN bu satırın altında: medya sorgusunu dosyanın
üst tarafındaki blok içine yazmak, aşağıdaki display:none'un
kaynak sırası gereği onu ezmesine yol açıyordu. */
.nav-giris{display:none}
.nav-giris a{display:block}
@media (max-width:1040px){
.nav-giris{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
}
.drop-ayrac{height:1px;background:var(--line);margin:6px 8px}
/* 1100px alti: menuyu biraz daha sikistir, hala tek satir */
@media (max-width:1180px){
.main-nav > a,.main-nav > .drop > a{font-size:.86rem;padding:9px 9px}
}
/* ===================== GUVENCE PAKETI / SUBE ===================== */
.guvence-paket{
border:1px solid #f2e2b4;border-radius:var(--r-lg);padding:16px 18px;margin-top:14px;
background:var(--grad-marka-yumusak)
}
.gp-ust{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.gp-ust > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.gp-ust b{font-size:.98rem}
.gp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.gp-liste li{position:relative;padding-left:20px;font-size:.85rem;line-height:1.5}
.gp-liste li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.gp-liste-eksi li::before{content:"−";color:var(--muted-2)}
.gp-haric{margin-top:10px}
.gp-haric summary{cursor:pointer;color:var(--muted)}
.gp-haric ul{margin-top:8px}
.sube-kutu{
display:flex;align-items:flex-start;gap:11px;margin-top:12px;padding:13px 16px;
border:1px solid var(--line);border-radius:var(--r);background:var(--grad-yuzey)
}
.sube-kutu > div{display:flex;flex-direction:column;gap:2px;min-width:0}
/* =====================================================================
ZENGIN METIN EDITORU (assets/js/editor.js)
===================================================================== */
.ed{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.ed:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.ed-cubuk{
display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:7px 9px;
border-bottom:1px solid var(--line);background:var(--grad-yuzey);
position:sticky;top:0;z-index:5
}
.ed-ayrac{width:1px;align-self:stretch;margin:3px 5px;background:var(--line)}
.ed-dugme{
display:inline-flex;align-items:center;justify-content:center;
min-width:32px;height:31px;padding:0 7px;border:1px solid transparent;
border-radius:8px;background:transparent;color:var(--ink-2);
font:600 .9rem/1 Manrope,system-ui,sans-serif;cursor:pointer;
transition:background .15s,border-color .15s,color .15s
}
.ed-dugme:hover{background:var(--brand-soft);border-color:#f0dda4;color:var(--brand-700)}
.ed-dugme:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ed-dugme.etkin{background:var(--brand);border-color:var(--brand-600);color:var(--logo-ink)}
.ed-dugme svg{display:block}
.ed-sec{
height:31px;padding:0 26px 0 9px;border:1px solid var(--line);border-radius:8px;
background:var(--card);color:var(--ink-2);font:600 .82rem Manrope,system-ui,sans-serif;
cursor:pointer;max-width:170px
}
.ed-sec:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ed-govde{
min-height:280px;max-height:62vh;overflow-y:auto;padding:18px 20px;
font:400 .96rem/1.75 Manrope,system-ui,sans-serif;color:var(--ink);outline:0
}
.ed-govde:focus{outline:0}
.ed-govde > :first-child{margin-top:0}
.ed-govde > :last-child{margin-bottom:0}
.ed-govde p{margin:0 0 .95em}
.ed-govde h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:1.5em 0 .5em}
.ed-govde h3{font-size:1.1rem;font-weight:750;margin:1.3em 0 .45em}
.ed-govde h4{font-size:.98rem;font-weight:700;margin:1.2em 0 .4em}
.ed-govde ul,.ed-govde ol{margin:0 0 1em;padding-left:1.4em}
.ed-govde li{margin-bottom:.35em}
.ed-govde blockquote{
margin:1.1em 0;padding:10px 16px;border-left:3px solid var(--brand);
background:var(--brand-soft);border-radius:0 8px 8px 0;color:var(--ink-2)
}
.ed-govde hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.ed-govde img{max-width:100%;height:auto;border-radius:10px;margin:.4em 0}
.ed-govde a{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px}
.ed-govde table{border-collapse:collapse;width:100%;margin:1.1em 0;font-size:.9rem}
.ed-govde th,.ed-govde td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.ed-govde th{background:var(--yuzey-2,#f8fafc);font-weight:700}
.ed-govde pre{
background:var(--logo-ink);color:#f1f5f9;padding:13px 16px;border-radius:10px;
overflow-x:auto;font:400 .85rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace
}
.ed-govde code{
background:var(--line-2);padding:2px 5px;border-radius:5px;
font:400 .87em ui-monospace,SFMono-Regular,Menlo,monospace
}
.ed-govde pre code{background:none;padding:0;color:inherit}
.ed-kaynak{
display:block;width:100%;min-height:340px;max-height:62vh;padding:16px 18px;
border:0;resize:vertical;background:#fbfcfd;color:var(--ink);
font:400 .84rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;outline:0
}
.ed-durum{
padding:6px 12px;border-top:1px solid var(--line);background:var(--grad-yuzey);
font-size:.76rem;color:var(--muted);min-height:26px
}
.ed-taslak-uyari{
display:flex;flex-wrap:wrap;align-items:center;gap:9px;
padding:9px 12px;background:var(--warn-soft);border-bottom:1px solid #f4d99b;
font-size:.83rem;color:#7a4c00
}
.ed-taslak-uyari button{
border:1px solid #e5c073;background:#fff;border-radius:7px;padding:4px 10px;
font:600 .8rem Manrope,system-ui,sans-serif;color:#7a4c00;cursor:pointer
}
.ed-taslak-uyari button:hover{background:var(--brand-soft)}
/* Tam ekran */
.ed.ed-tam{
position:fixed;inset:12px;z-index:2000;display:flex;flex-direction:column;
box-shadow:0 24px 70px rgba(15,23,42,.3)
}
.ed.ed-tam .ed-govde,.ed.ed-tam .ed-kaynak{flex:1;max-height:none}
/* Editorde ve yayinda AYNI gorunsun diye kutu siniflari ortak */
.ed-govde .bilgi-kutu,.yazi-govde .bilgi-kutu,
.ed-govde .uyari-kutu,.yazi-govde .uyari-kutu,
.ed-govde .ipucu-kutu,.yazi-govde .ipucu-kutu{
margin:1.2em 0;padding:14px 18px;border-radius:12px;border:1px solid;font-size:.93rem
}
.ed-govde .bilgi-kutu,.yazi-govde .bilgi-kutu{background:var(--info-soft);border-color:#c5dcf8;color:#124a8f}
.ed-govde .uyari-kutu,.yazi-govde .uyari-kutu{background:var(--warn-soft);border-color:#f4d99b;color:#7a4c00}
.ed-govde .ipucu-kutu,.yazi-govde .ipucu-kutu{background:var(--brand-soft);border-color:#f0dda4;color:#553f02}
.ed-govde .bilgi-kutu p:last-child,.yazi-govde .bilgi-kutu p:last-child,
.ed-govde .uyari-kutu p:last-child,.yazi-govde .uyari-kutu p:last-child,
.ed-govde .ipucu-kutu p:last-child,.yazi-govde .ipucu-kutu p:last-child{margin-bottom:0}
.ed-govde .vurgu,.yazi-govde .vurgu{background:var(--brand-soft);padding:1px 5px;border-radius:5px;font-weight:600}
.ed-govde .metin-orta,.yazi-govde .metin-orta{text-align:center}
.ed-govde .metin-sag,.yazi-govde .metin-sag{text-align:right}
.ed-govde .kucuk,.yazi-govde .kucuk{font-size:.85em;color:var(--muted)}
/* Yayinlanan yazi govdesi — editorle ayni tipografi */
.yazi-govde{font-size:1rem;line-height:1.78;color:var(--ink)}
.yazi-govde > :first-child{margin-top:0}
.yazi-govde p{margin:0 0 1.05em}
.yazi-govde h2{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:1.7em 0 .55em;scroll-margin-top:90px}
.yazi-govde h3{font-size:1.15rem;font-weight:750;margin:1.4em 0 .45em;scroll-margin-top:90px}
.yazi-govde ul,.yazi-govde ol{margin:0 0 1.1em;padding-left:1.45em}
.yazi-govde li{margin-bottom:.4em}
.yazi-govde a{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px}
.yazi-govde a:hover{color:var(--ink)}
.yazi-govde img{max-width:100%;height:auto;border-radius:12px;margin:.6em 0}
.yazi-govde blockquote{
margin:1.3em 0;padding:12px 18px;border-left:3px solid var(--brand);
background:var(--brand-soft);border-radius:0 10px 10px 0
}
.yazi-govde hr{border:0;border-top:1px solid var(--line);margin:1.8em 0}
.yazi-govde table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:.92rem}
.yazi-govde th,.yazi-govde td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.yazi-govde th{background:var(--brand-soft);font-weight:700}
.yazi-govde pre{
background:var(--logo-ink);color:#f1f5f9;padding:14px 18px;border-radius:12px;
overflow-x:auto;font:400 .85rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace
}
.yazi-govde code{background:var(--line-2);padding:2px 5px;border-radius:5px;
font:400 .87em ui-monospace,SFMono-Regular,Menlo,monospace}
.yazi-govde pre code{background:none;padding:0;color:inherit}
/* Genis tablolar sayfayi TASIRMAZ; kendi icinde kayar */
.yazi-govde table{display:block;overflow-x:auto;max-width:100%}
/* Icindekiler */
.icindekiler{
border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 22px;
background:var(--grad-yuzey)
}
.icindekiler > b{display:block;font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);margin-bottom:9px}
.icindekiler ol{list-style:none;margin:0;padding:0;counter-reset:ic}
.icindekiler li{counter-increment:ic;margin-bottom:5px;font-size:.9rem}
.icindekiler li.s3{padding-left:18px;font-size:.86rem}
.icindekiler a{color:var(--ink-2);text-decoration:none}
.icindekiler a::before{content:counter(ic) ". ";color:var(--brand-700);font-weight:700}
.icindekiler li.s3 a::before{content:"– ";}
.icindekiler a:hover{color:var(--brand-700);text-decoration:underline}
@media (max-width:640px){
.ed-cubuk{gap:2px;padding:6px}
.ed-dugme{min-width:30px;height:29px}
.ed-sec{max-width:130px;font-size:.78rem}
.ed-govde{padding:14px;min-height:220px}
}
.ed.ed-hatali{border-color:var(--err);box-shadow:0 0 0 3px rgba(217,45,32,.16)}
.ed.ed-hatali .ed-durum{color:var(--err);font-weight:600}
/* Dar ekranda kisalan etiketler (bkz. includes/header.php) */
.yalniz-dar{display:none}
@media (max-width:430px){
.yalniz-genis{display:none}
.yalniz-dar{display:inline}
.site-header .container{gap:10px}
.header-actions{gap:6px}
.site-header .logo img{height:28px}
}
/* =====================================================================
KARSILASTIRMA + KART EYLEMLERI + SON BAKILANLAR
===================================================================== */
/* Kart uzerindeki "Karşılaştır" dugmesi */
.arac-kars{
position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
padding:6px 11px;border:1px solid rgba(255,255,255,.55);border-radius:999px;
background:rgba(255,255,255,.93);color:var(--ink-2);cursor:pointer;
font:600 .76rem Manrope,system-ui,sans-serif;
opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s,background .18s,color .18s;
backdrop-filter:blur(3px)
}
.arac-card:hover .arac-kars,.arac-kars:focus-visible,.arac-kars.on{opacity:1;transform:none}
.arac-kars:hover{background:#fff;color:var(--brand-700);border-color:var(--brand)}
.arac-kars.on{background:var(--brand);border-color:var(--brand-600);color:var(--logo-ink)}
.arac-kars svg{flex:none}
/* Dokunmatikte "hover" yok — dugme hep gorunur olmali */
@media (hover:none){ .arac-kars{opacity:1;transform:none} }
@media (max-width:420px){ .arac-kars span{display:none} .arac-kars{padding:7px 9px} }
/* Alt karşılaştırma çubuğu */
.kars-cubuk{
position:fixed;left:0;right:0;bottom:0;z-index:70;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:11px clamp(14px,4vw,32px);
background:var(--grad-koyu);color:#fff;
box-shadow:0 -6px 24px rgba(15,23,42,.22);
transform:translateY(110%);transition:transform .25s ease
}
.kars-cubuk.acik{transform:none}
.kars-cubuk b{font-size:.92rem}
.kars-cubuk .say{
display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
padding:0 7px;border-radius:999px;background:var(--brand);color:var(--logo-ink);
font-weight:800;font-size:.8rem
}
.kars-cubuk .bosluk{flex:1}
.kars-cubuk .kars-kapat{
background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:9px;
padding:7px 12px;font:600 .82rem Manrope,system-ui,sans-serif;cursor:pointer
}
.kars-cubuk .kars-kapat:hover{background:rgba(255,255,255,.12)}
/* Karşılaştırma tablosu */
.kars-sarmal{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.kars-tablo{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
.kars-tablo th,.kars-tablo td{
padding:11px 14px;border-bottom:1px solid var(--line-2);
font-size:.9rem;text-align:center;vertical-align:middle
}
.kars-tablo tbody tr:last-child th,.kars-tablo tbody tr:last-child td{border-bottom:0}
.kars-etiket{
text-align:left!important;font-weight:700;color:var(--ink-2);white-space:nowrap;
background:var(--card);position:sticky;left:0;z-index:2;
border-right:1px solid var(--line);width:170px
}
.kars-tablo thead th{background:var(--grad-yuzey);border-bottom:1px solid var(--line);padding:14px}
.kars-tablo thead .kars-etiket{background:var(--grad-yuzey)}
.kars-arac{position:relative;min-width:190px}
.kars-arac a{display:block;text-decoration:none;color:inherit}
.kars-arac img{width:100%;max-width:170px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:8px}
.kars-arac b{display:block;font-size:.87rem;line-height:1.4;margin-bottom:5px}
.kars-arac a:hover b{color:var(--brand-700)}
.kars-fiyat{display:block;font-weight:800;font-size:1.02rem;color:var(--ink)}
.kars-taksit{display:block;font-size:.79rem;color:var(--brand-700);font-weight:700;margin-top:2px}
.kars-taksit.yok{color:var(--muted);font-weight:500}
.kars-cikar{position:absolute;top:6px;right:6px;margin:0}
.kars-cikar button{
display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer
}
.kars-cikar button:hover{border-color:var(--err);color:var(--err);background:var(--err-soft)}
.kars-bos a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
min-height:150px;border:2px dashed var(--line);border-radius:12px;
color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600
}
.kars-bos a:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-soft)}
.kars-bos-h{color:var(--line);}
.kars-iyi{background:var(--brand-soft);font-weight:700;position:relative}
.kars-rozet{display:block;color:var(--brand-700);font-weight:700;letter-spacing:.02em;margin-top:1px}
.kars-ayni td,.kars-ayni th{color:var(--muted)}
.kars-en-iyi-ornek{
background:var(--brand-soft);color:var(--brand-700);font-weight:700;
padding:1px 6px;border-radius:5px
}
.kars-eylem td{padding-top:14px;padding-bottom:16px}
.kars-alt-cta{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
margin-top:22px;padding:18px 22px;border:1px solid #f2e2b4;border-radius:var(--r-lg);
background:var(--grad-marka-yumusak)
}
.kars-alt-cta b{display:block;margin-bottom:2px}
.kars-alt-cta .muted{font-size:.88rem}
/* Paylaş */
.paylas-satir{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.paylas-satir > span{font-size:.83rem;color:var(--muted);font-weight:600}
.paylas-dugme{
display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
border:1px solid var(--line);background:var(--card);color:var(--ink-2);
font:600 .8rem Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer
}
.paylas-dugme:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-soft)}
.paylas-dugme.kopyalandi{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
/* Sosyal kanıt şeridi */
.ilgi-serit{
display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
background:var(--ok-soft);color:var(--ok);font-size:.81rem;font-weight:700
}
@media (max-width:720px){
.kars-etiket{width:120px;font-size:.82rem;padding:10px}
.kars-tablo th,.kars-tablo td{padding:9px 10px;font-size:.84rem}
.kars-arac{min-width:150px}
}
/* Ilan sayfasindaki karşılaştır düğmesi kart içindeki gibi degil, akista durur */
.arac-kars.kars-ilan{
position:static;opacity:1;transform:none;width:100%;justify-content:center;
margin-top:10px;padding:10px 14px;border-color:var(--line);background:var(--card);
font-size:.85rem
}
.arac-kars.kars-ilan span{display:inline}
.menu-say{
display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
padding:0 5px;border-radius:999px;background:var(--brand);color:var(--logo-ink);
font-size:.7rem;font-weight:800;margin-left:4px
}
/* Kurumsal sayfa alt bilgisi */
.sayfa-diger{
margin-top:26px;padding:16px 20px;border:1px solid var(--line);
border-radius:var(--r-lg);background:var(--grad-yuzey)
}
.sayfa-diger > b{font-size:.85rem;color:var(--muted)}
/* =====================================================================
MÜŞTERİ TEKLİF ÇIKTISI (teklif.php)
=====================================================================
Ekranda kart, kâğıtta belge. Yazdırma kurallari en altta; oradaki
amac tek sayfaya sigdirmak degil, SAYFA SONLARINI dogru yerden
gecirmek — bir taksit satiri iki sayfaya bolunmesin.
===================================================================== */
.teklif-arac-cubuk{
display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px
}
.teklif{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(18px,3vw,34px);box-shadow:var(--sh)
}
.teklif-ust{
display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
padding-bottom:18px;border-bottom:2px solid var(--brand)
}
.teklif-marka img{height:40px;width:auto;display:block;margin-bottom:8px}
.teklif-marka .tiny{line-height:1.6}
.teklif-kod{text-align:right}
.teklif-kod b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.02em;margin:2px 0 6px}
.teklif-kod .tiny{line-height:1.6}
.teklif-iki{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin:18px 0}
.teklif-kutu{
border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:var(--grad-yuzey)
}
.teklif-etiket{
display:block;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted-2);margin-bottom:4px
}
.teklif-kutu b{font-size:.98rem;line-height:1.35;display:block}
.teklif-foto{
width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin-bottom:18px
}
.teklif-ozet{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden
}
.teklif-ozet .to{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.teklif-ozet .to span{font-size:.72rem;color:var(--muted);font-weight:600}
.teklif-ozet .to b{font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.teklif-ozet .to.vurgu{background:var(--brand-soft)}
.teklif-ozet .to.vurgu b{color:var(--brand-700);font-size:1.15rem}
.teklif-tur{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.teklif-h2{font-size:1.05rem;font-weight:800;margin:26px 0 12px}
.teklif-plan{font-size:.85rem}
.teklif-plan .sag{text-align:right}
.teklif-plan tfoot th{background:var(--grad-yuzey);font-weight:800}
.teklif-plan .satir-ozel{background:var(--brand-soft)}
.teklif-toplam{
margin-top:18px;border:1px solid #f2e2b4;border-radius:12px;overflow:hidden;
background:var(--grad-marka-yumusak)
}
.teklif-toplam > div{
display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:11px 17px;border-bottom:1px solid rgba(169,127,5,.16)
}
.teklif-toplam > div:last-child{border-bottom:0}
.teklif-toplam span{font-size:.86rem;color:#5b4a1d}
.teklif-toplam b{font-weight:800;white-space:nowrap}
.teklif-toplam .buyuk{background:rgba(255,255,255,.55)}
.teklif-toplam .buyuk span{font-weight:700;color:var(--ink)}
.teklif-toplam .buyuk b{font-size:1.28rem;color:var(--brand-700)}
.teklif-alt{
display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:22px;
margin-top:24px;padding-top:20px;border-top:1px solid var(--line)
}
.teklif-qr{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.teklif-qr svg{width:112px;height:112px;display:block}
.teklif-notlar b{display:block;font-size:.88rem;margin-bottom:7px}
.teklif-notlar ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.teklif-notlar li{font-size:.8rem;line-height:1.55;color:var(--ink-2)}
.teklif-imza{
display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:32px;
padding-top:18px;border-top:1px solid var(--line)
}
.teklif-imza > div span{font-size:.76rem;color:var(--muted);font-weight:600}
.teklif-imza > div i{display:block;border-bottom:1px solid var(--ink-2);margin-top:38px}
.teklif-damga{grid-column:1/-1;text-align:center;margin-top:14px}
@media (max-width:620px){
.teklif-alt{grid-template-columns:1fr}
.teklif-qr{align-items:flex-start;text-align:left}
.teklif-ust{flex-direction:column}
.teklif-kod{text-align:left}
}
/* ------------------------- YAZDIRMA ------------------------- */
@media print{
.teklif{border:0;box-shadow:none;padding:0;border-radius:0}
.teklif-arac-cubuk,.no-print{display:none!important}
/* Bir taksit satiri iki sayfaya bolunmesin */
.teklif-plan tr{break-inside:avoid;page-break-inside:avoid}
.teklif-plan thead{display:table-header-group} /* her sayfada baslik tekrarlansin */
/* tfoot'a table-footer-group VERMIYORUZ: o zaman "TOPLAM" satiri her
sayfanin altina basiliyor ve ilk sayfada, o sayfadaki satirlarin
toplami saniliyor. Tek seferde, tablonun gercek sonunda kalsin. */
.teklif-plan tfoot{display:table-row-group}
.teklif-plan tfoot tr{break-inside:avoid;page-break-inside:avoid}
.teklif-toplam,.teklif-alt,.teklif-imza{break-inside:avoid;page-break-inside:avoid}
.teklif-h2{break-after:avoid;page-break-after:avoid}
.teklif-ozet{border-color:#bbb}
.teklif-ozet .to.vurgu{background:#f5f5f5}
.teklif-toplam{background:#fafafa;border-color:#bbb}
.teklif-foto{max-height:150px}
.table-wrap{overflow:visible}
a[href]::after{content:""} /* baglanti adresini metne eklemeyelim */
@page{margin:14mm}
}
/* Uygulama kurulum şeridi (PWA) */
.kur-serit{
position:fixed;left:12px;right:12px;bottom:12px;z-index:90;
background:var(--grad-koyu);color:#fff;border-radius:16px;
box-shadow:0 14px 40px rgba(15,23,42,.32);
transform:translateY(140%);transition:transform .3s ease
}
.kur-serit.acik{transform:none}
.kur-ic{display:flex;align-items:center;gap:13px;padding:13px 15px}
.kur-ic img{border-radius:11px;flex:none}
.kur-yazi{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.kur-yazi b{font-size:.92rem}
.kur-yazi span{font-size:.78rem;color:rgba(255,255,255,.78)}
.kur-hayir{
background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;flex:none;
font-size:1.05rem;line-height:1;padding:8px;border-radius:8px
}
.kur-hayir:hover{background:rgba(255,255,255,.12);color:#fff}
@media (min-width:720px){
.kur-serit{left:auto;right:18px;bottom:18px;max-width:400px}
}
@media (max-width:420px){ .kur-yazi span{display:none} }
/* =====================================================================
GALERİ PANELİ
===================================================================== */
/* --- Abonelik --- */
.ab-ust{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.ab-kalan{
text-align:center;padding:10px 20px;border-radius:14px;
background:var(--grad-marka-yumusak);border:1px solid #f2e2b4;flex:none
}
.ab-kalan b{display:block;font-size:1.7rem;font-weight:800;line-height:1;color:var(--brand-700)}
.ab-kalan span{font-size:.74rem;color:#6b5a2a}
.ab-kullanim{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)
}
.ab-olcer .olcer-iz{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.ab-olcer .olcer-iz span{display:block;height:100%;border-radius:99px}
.ab-ozellikler{
display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding-top:14px;
border-top:1px solid var(--line-2)
}
.ab-oz{
display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
font-size:.76rem;font-weight:600
}
.ab-oz.var{background:var(--ok-soft);color:var(--ok)}
.ab-oz.yok{background:var(--line-2);color:var(--muted-2)}
.ab-havale{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden
}
.ab-havale > div{background:#fff;padding:11px 14px;display:flex;flex-direction:column;gap:3px}
.ab-havale span{font-size:.72rem;color:var(--muted);font-weight:600}
.ab-havale b{font-size:.9rem;word-break:break-all}
/* --- Paket kartları --- */
.paket-izgara{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px
}
.paket{
position:relative;display:flex;flex-direction:column;
border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;background:#fff;
transition:border-color .16s,box-shadow .16s
}
.paket:hover{border-color:var(--brand);box-shadow:var(--sh)}
.paket.secili{border-color:var(--brand);border-width:2px;background:var(--brand-soft)}
.paket-rozet{
position:absolute;top:-11px;left:20px;padding:3px 11px;border-radius:999px;
background:var(--brand);color:var(--logo-ink);font-size:.7rem;font-weight:800
}
.paket h3{font-size:1.15rem;font-weight:800;margin:0 0 6px}
.paket-aciklama{font-size:.84rem;color:var(--muted);margin:0 0 16px;line-height:1.5;min-height:2.6em}
.paket-fiyat{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.paket-fiyat b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.paket-fiyat > span{font-size:.85rem;color:var(--muted);margin-left:3px}
.paket-liste{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px;flex:1}
.paket-liste li{position:relative;padding-left:20px;font-size:.85rem;line-height:1.45}
.paket-liste li::before{content:"·";position:absolute;left:6px;color:var(--muted-2);font-weight:800}
.paket-liste li.var::before{content:"✓";left:2px;color:var(--ok);font-weight:800;font-size:.85rem}
/* Ucretsiz (kilitli) pakette KAPALI olan satirlar */
.paket-liste li.yok{color:var(--muted-2)}
.paket-liste li.yok::before{content:"✕";left:3px;color:var(--muted-2);font-weight:800;font-size:.78rem}
.paket-form{margin-top:auto}
/* --- Hatırlatma satırları --- */
.hat-satir{
display:grid;grid-template-columns:32px 1fr auto auto;gap:12px;align-items:center;
padding:11px 0;border-bottom:1px solid var(--line-2)
}
.hat-satir:last-child{border-bottom:0}
.hat-tur{
display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
background:var(--brand-soft);color:var(--brand-700);border:1px solid #f4e5b8
}
.hat-satir.gecikmis .hat-tur{background:var(--err-soft);color:var(--err);border-color:#f6c6c1}
.hat-satir.yakin .hat-tur{background:var(--warn-soft);color:#9a5f00;border-color:#f4d99b}
.hat-satir.bitti{opacity:.6}
.hat-govde{min-width:0}
.hat-govde b{display:block;font-size:.9rem;line-height:1.35}
.hat-govde span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hat-tarih{text-align:right;white-space:nowrap}
.hat-tarih b{display:block;font-size:.85rem}
.hat-tarih .gecmis{color:var(--err);font-weight:700}
.hat-eylem{display:flex;gap:4px;flex-wrap:nowrap}
@media (max-width:640px){
.hat-satir{grid-template-columns:32px 1fr;grid-template-areas:"i g" ". t" ". e";gap:6px 10px}
.hat-tur{grid-area:i} .hat-govde{grid-area:g}
.hat-tarih{grid-area:t;text-align:left} .hat-eylem{grid-area:e}
.ab-ust{flex-direction:column}
}
/* ============================================================
ARAC PAYLASIM AGI (galeri/paylasim.php)
============================================================ */
.pay-grid{
display:grid;gap:14px;
grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))
}
.pay-kart{
display:flex;flex-direction:column;gap:11px;min-width:0;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:15px;box-shadow:var(--sh-sm)
}
.pay-ust{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pay-baslik{font-size:1rem;font-weight:700;line-height:1.3;margin:0}
.pay-alt{font-size:.82rem;color:var(--muted-2);margin:2px 0 0}
.pay-fiyat{
flex:0 0 auto;font-weight:800;font-size:.95rem;color:var(--brand-700);
background:var(--brand-soft);border:1px solid #f0dda4;border-radius:9px;padding:5px 9px;white-space:nowrap
}
.pay-ozet{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
list-style:none;margin:0;padding:0
}
.pay-ozet li{min-width:0}
.pay-ozet span{display:block;font-size:.7rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em}
.pay-ozet b{display:block;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-komisyon{
display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;
background:var(--brand-soft);border:1px solid #f4e5b8;color:var(--brand-700)
}
.pay-komisyon > div{min-width:0}
.pay-komisyon span{display:block;line-height:1.3}
.pay-komisyon b{display:block;font-size:.9rem;color:var(--brand-700)}
.pay-not{
margin:0;font-size:.82rem;color:var(--muted);
border-left:3px solid var(--line);padding-left:10px
}
.pay-alt-satir{
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2)
}
.pay-sahip{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted)}
.pay-sahip > div{min-width:0}
.pay-sahip b{display:block;font-size:.85rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-sahip span{display:block}
.pay-form{display:flex;align-items:center;gap:6px;margin:0}
.pay-mini{max-width:86px;padding:6px 8px;font-size:.85rem}
select.pay-mini{max-width:64px}
.pay-oran{font-size:.85rem;font-weight:700;color:var(--brand-700)}
/* Iletisim kutusu */
.pay-ortu{
position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.55);
display:flex;align-items:center;justify-content:center;padding:16px
}
.pay-ortu[hidden]{display:none}
.pay-kutu{
width:100%;max-width:480px;background:var(--card);border-radius:var(--r-lg);
padding:18px;box-shadow:0 24px 60px rgba(15,23,42,.28);max-height:90vh;overflow:auto
}
/* ============================================================
GALERILER ARASI MESAJLASMA (galeri/mesajlar.php)
============================================================ */
.msj-yeni select{max-width:260px;font-size:.85rem;padding:8px 10px}
.msj-duzen{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:14px;align-items:start}
.msj-liste{overflow:hidden;max-height:70vh;overflow-y:auto}
.msj-satir{
display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;
padding:11px 13px;border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none
}
.msj-satir:last-child{border-bottom:0}
.msj-satir:hover{background:var(--line-2)}
.msj-satir.aktif{background:var(--brand-soft)}
.msj-avatar{
display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
background:var(--brand-soft);color:var(--brand-700);border:1px solid #f4e5b8
}
.msj-satir.aktif .msj-avatar{background:var(--card)}
.msj-govde{min-width:0}
.msj-govde b{display:block;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msj-onizleme{
display:block;font-size:.78rem;color:var(--muted-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.msj-sag{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.msj-konusma{display:flex;flex-direction:column;min-height:420px;max-height:70vh;overflow:hidden}
.msj-baslik{
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
padding:13px 15px;border-bottom:1px solid var(--line)
}
.msj-akis{flex:1;overflow-y:auto;padding:15px;background:var(--bg)}
.msj-gun{display:flex;align-items:center;justify-content:center;margin:10px 0}
.msj-gun span{
font-size:.72rem;color:var(--muted-2);background:var(--card);
border:1px solid var(--line);border-radius:999px;padding:3px 10px
}
.msj-balon{
max-width:min(78%,520px);margin-bottom:9px;padding:9px 12px;border-radius:14px;
background:var(--card);border:1px solid var(--line);word-break:break-word
}
.msj-balon p{margin:0;font-size:.88rem;line-height:1.5}
.msj-balon.ben{margin-left:auto;background:var(--brand-soft);border-color:#f0dda4}
.msj-balon.karsi{margin-right:auto}
.msj-saat{display:block;margin-top:3px;font-size:.7rem;color:var(--muted-2);text-align:right}
.msj-arac{
display:inline-flex;align-items:center;gap:5px;margin-bottom:6px;padding:3px 8px;
border-radius:8px;background:var(--card);border:1px solid var(--line);
font-size:.75rem;font-weight:600;color:var(--brand-700);text-decoration:none
}
.msj-balon.karsi .msj-arac{background:var(--bg)}
.msj-yazma{display:flex;gap:9px;align-items:flex-end;padding:12px 15px;border-top:1px solid var(--line)}
.msj-yazma textarea{flex:1;resize:vertical;min-height:44px}
.msj-yazma .btn{flex:0 0 auto}
@media (max-width:820px){
.msj-duzen{grid-template-columns:minmax(0,1fr)}
.msj-liste{max-height:230px}
.msj-konusma{max-height:none}
}
@media (max-width:640px){
.pay-ozet{grid-template-columns:repeat(2,minmax(0,1fr))}
.pay-alt-satir{flex-direction:column;align-items:stretch}
.pay-alt-satir .btn{width:100%;justify-content:center}
.msj-balon{max-width:88%}
}
/* ============================================================
CARI HESAPLAR (galeri/cari.php)
============================================================ */
.cari-duzen{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px;align-items:start}
.cari-eylem{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cari-eylem form{margin:0}
.tbl tr.satir-aktif{background:var(--brand-soft)}
.cari-bakiye{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
margin-top:12px;padding:10px 13px;border-radius:10px;
background:var(--line-2);border:1px solid var(--line)
}
.cari-bakiye span{font-size:.8rem;color:var(--muted)}
.cari-bakiye b{font-size:1.15rem}
.cari-bakiye.arti{background:var(--ok-soft);border-color:#bfe6d1}
.cari-bakiye.arti b{color:#0b6e3f}
.cari-bakiye.eksi{background:var(--err-soft);border-color:#f6c6c1}
.cari-bakiye.eksi b{color:var(--err)}
@media (max-width:900px){
.cari-duzen{grid-template-columns:minmax(0,1fr)}
}
/* ============================================================
ILAN AKTARIMI (galeri/aktarim*.php)
============================================================ */
.ak-liste{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
.ak-kart{
display:flex;flex-direction:column;gap:9px;min-width:0;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:14px;box-shadow:var(--sh-sm)
}
.ak-kart.secili{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring)}
.ak-kart.pasif{opacity:.66}
.ak-adres{
margin:0;font-size:.76rem;color:var(--muted-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
background:var(--line-2);border-radius:7px;padding:5px 8px
}
.ak-hata{color:var(--err)}
.ak-eylem{
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2)
}
.ak-eylem form{margin:0}
.ak-secenekler{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.ak-onay{
display:flex;align-items:flex-start;gap:9px;padding:10px 12px;
border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--card)
}
.ak-onay:hover{border-color:var(--brand);background:var(--brand-soft)}
.ak-onay input{margin-top:3px;flex:0 0 auto}
.ak-onay span{min-width:0;font-size:.85rem;line-height:1.4}
.ak-eslesme{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.ak-e{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;
padding:6px 9px;border-radius:8px;background:var(--line-2);font-size:.8rem
}
.ak-e span{color:var(--muted);flex:0 0 auto}
.ak-e b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand-700)}
.ak-e.yok{opacity:.55} .ak-e.yok b{color:var(--muted-2);font-weight:400}
.ak-eslesme-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ak-ef{display:flex;flex-direction:column;gap:4px;min-width:0}
.ak-ef .tiny{line-height:1.35}
.ak-adimlar{
display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0
}
.ak-adimlar li{
display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
border:1px solid var(--line);background:var(--card);font-size:.85rem;color:var(--muted)
}
.ak-adimlar .ak-n{
display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
background:var(--line-2);color:var(--muted);font-size:.75rem;font-weight:700;flex:0 0 auto
}
.ak-adimlar li.aktif{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-700);font-weight:700}
.ak-adimlar li.aktif .ak-n{background:var(--brand);color:#20160a}
.ak-adimlar li.bitti{color:#0b6e3f;border-color:#bfe6d1;background:var(--ok-soft)}
.ak-adimlar li.bitti .ak-n{background:#0b6e3f;color:#fff}
.ak-detay td{padding-top:0;border-top:0}
.ak-log{
margin:6px 0 0;padding:9px 11px;border-radius:8px;background:var(--line-2);
font-size:.75rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;
max-height:220px;overflow:auto
}
/* ============================================================
GORSEL STUDYOSU (galeri/gorsel-studyo.php)
============================================================ */
.st-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.st-kart{
position:relative;display:block;border:2px solid var(--line);border-radius:12px;
overflow:hidden;cursor:pointer;background:var(--card)
}
.st-kart img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.st-kart input{
position:absolute;top:8px;left:8px;z-index:2;width:19px;height:19px;cursor:pointer;
accent-color:var(--brand-600)
}
.st-kart:hover{border-color:var(--brand)}
.st-kart:has(input:checked){border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-ring)}
.st-kart:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.st-alt{display:block;padding:7px 9px;background:var(--card);min-height:30px}
.st-islemler{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.st-ayar{
margin:14px 0 0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
background:var(--bg)
}
.st-ayar[hidden]{display:none}
.st-ayar legend{padding:0 6px;color:var(--muted);font-weight:700}
.st-ayar input[type=range]{width:100%;accent-color:var(--brand-600)}
.st-ayar input[type=color]{width:100%;height:40px;padding:3px;cursor:pointer}
.st-geri{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.st-g{display:flex;gap:10px;align-items:center;min-width:0}
.st-g img{width:78px;height:58px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:0 0 auto}
.st-g > div{min-width:0}
.st-g form{margin:0}
@media (max-width:640px){
.ak-eylem{flex-direction:column;align-items:stretch}
.ak-eylem > div{width:100%}
.ak-adimlar li{flex:1 1 100%}
}
/* ============================================================
GALERI — MUSTERI SIGORTA TEKLIFI (galeri/sigorta.php)
============================================================ */
.sg-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.sg-kart{
position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:14px;box-shadow:var(--sh-sm)
}
.sg-kart.enucuz{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring)}
.sg-rozet{
position:absolute;top:-9px;right:12px;padding:2px 9px;border-radius:999px;
background:var(--brand);color:#20160a;font-size:.68rem;font-weight:800;
letter-spacing:.03em;text-transform:uppercase
}
.sg-kart header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sg-kart header b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-prim{font-size:1.35rem;font-weight:800;color:var(--brand-700);line-height:1.15}
.sg-avantaj{
margin:4px 0 0;padding-left:16px;list-style:none;
font-size:.76rem;color:var(--muted);line-height:1.55
}
.sg-avantaj li{position:relative}
.sg-avantaj li::before{
content:'';position:absolute;left:-12px;top:.5em;width:5px;height:5px;
border-radius:50%;background:var(--brand-600)
}
/* ============================================================
FINDEKS KREDI NOTU (galeri/kredi-sorgula.php)
============================================================ */
.fd-sonuc{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fd-not{
display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
border:4px solid var(--line);flex:0 0 auto;text-align:center;line-height:1.1
}
.fd-not b{font-size:1.5rem;font-weight:800}
.fd-not span{font-size:.66rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em}
.fd-yesil {border-color:#0b6e3f} .fd-yesil b {color:#0b6e3f}
.fd-sari {border-color:#c07800} .fd-sari b {color:#9a5f00}
.fd-turuncu {border-color:#c25e00} .fd-turuncu b {color:#a24d00}
.fd-kirmizi {border-color:var(--err)} .fd-kirmizi b{color:var(--err)}
.fd-gri {border-color:var(--line)} .fd-gri b {color:var(--muted)}
.fd-kurumlar{display:flex;flex-wrap:wrap;gap:7px}
.fd-kurum{
display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
background:var(--card);border:1px solid var(--line);font-size:.82rem;font-weight:600
}
.fd-kurum i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fd-kurum em{font-style:normal;font-size:.7rem;color:var(--muted-2);font-weight:400}
/* ============================================================
VERI DOGRULAMA (admin/veri-dogrulama.php)
============================================================ */
.vd-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vd-liste li{
display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:11px;align-items:center;
padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card)
}
.vd-liste li.tamam{background:var(--ok-soft);border-color:#bfe6d1}
.vd-liste li.eksik{background:var(--warn-soft);border-color:#f4d99b}
.vd-im{
display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
font-weight:800;font-size:.85rem;color:#fff;flex:0 0 auto
}
.vd-liste li.tamam .vd-im{background:#0b6e3f}
.vd-liste li.eksik .vd-im{background:#9a5f00}
.vd-liste li > div{min-width:0}
tr.vd-bekleyen{background:var(--warn-soft)}
tr.vd-bekleyen td{border-color:#f4d99b}
.vd-oran{max-width:120px;padding:6px 8px;font-size:.86rem;text-align:right}
.vd-nokta{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
/* =====================================================================
GALERİ MAĞAZA TEMASI
Renkler `.magaza-tema` kapsamındaki --mg-* değişkenlerinden gelir;
sitenin --brand değişkeni değişmez.
===================================================================== */
.tema-secim{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-bottom:16px}
.tema-kart{
display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
border:1px solid var(--line);border-radius:10px;background:#fff;
transition:border-color .15s,box-shadow .15s
}
.tema-kart:hover{border-color:var(--brand-600)}
.tema-kart.secili{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.tema-kart input{position:absolute;opacity:0;width:0;height:0}
.tema-kart:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.tema-ornek{width:26px;height:26px;border-radius:7px;flex:none;border:1px solid rgba(0,0,0,.12)}
.tema-ad{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.25}
.tema-oniz{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:6px}
.tema-oniz-bant{
background:var(--oniz-ana,#f0b323);color:var(--oniz-yazi,#1a1710);
padding:20px 22px;display:flex;flex-direction:column;gap:3px
}
.tema-oniz-bant b{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.tema-oniz-bant span{font-size:.88rem;opacity:.88}
.tema-oniz-bant span:empty{display:none}
.tema-oniz-alt{
padding:11px 22px;background:var(--yuzey-2,#f8fafc);
display:flex;gap:12px;align-items:center;flex-wrap:wrap
}
.tema-oniz-rozet{
background:var(--oniz-koyu,#8a6410);color:#fff;font-size:.72rem;font-weight:700;
padding:4px 10px;border-radius:999px;letter-spacing:.02em
}
/* --- Halka açık mağaza sayfası --- */
.magaza-bant{background:var(--mg-ana);color:var(--mg-yazi)}
.magaza-bant .magaza-slogan{opacity:.9}
.magaza-rozet{background:var(--mg-koyu);color:#fff}
.magaza-cizgi{height:5px;background:var(--mg-ana)}
.magaza-tema .magaza-vurgu{color:var(--mg-koyu)}
/* "Geniş" düzende başlık bloğu renkli zeminin ÜSTÜNDE duruyor; oradaki
soluk gri yazılar koyu zeminde okunmuyordu. Bu blok içindeki bütün
metin tema yazı rengini alır. */
.magaza-ustyazi,
.magaza-ustyazi .muted,
.magaza-ustyazi .tiny{color:var(--mg-yazi)}
.magaza-ustyazi .muted,.magaza-ustyazi .tiny{opacity:.86}
.magaza-ustyazi .magaza-slogan{opacity:.95}
/* =====================================================================
GALERİ ÖDEME — sipariş özeti, havale kutusu, ek hizmet kartları
===================================================================== */
.od-ozet{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.od-tutar{text-align:right;min-width:130px}
.od-tutar span{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
.od-tutar b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.havale-kutu{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
gap:1px;background:var(--line-2);border:1px solid var(--line-2);
border-radius:var(--r);overflow:hidden
}
.havale-kutu > div{background:#fff;padding:11px 14px;display:flex;flex-direction:column;gap:3px}
.havale-kutu span{font-size:.72rem;color:var(--muted);font-weight:600}
.havale-kutu b{font-size:.9rem;word-break:break-all}
.havale-kutu .vurgu{background:var(--brand-soft)}
/* Kopyalanacak alanlar: cift tiklamayla tamami secilsin */
.secilebilir{user-select:all;-webkit-user-select:all}
.pos-cerceve{width:100%;min-height:560px;border:0;border-radius:var(--r);background:#fff}
.ek-izgara{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));gap:16px
}
.ek-kart{
display:flex;flex-direction:column;
border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;background:#fff;
transition:border-color .16s,box-shadow .16s
}
.ek-kart:hover{border-color:var(--brand);box-shadow:var(--sh)}
.ek-kart h3{font-size:1.02rem;font-weight:800;margin:0 0 6px}
.ek-aciklama{font-size:.82rem;color:var(--muted);margin:0 0 14px;line-height:1.5;flex:1}
.ek-fiyat{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.ek-fiyat b{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.ek-fiyat > span{font-size:.8rem;color:var(--muted);margin-left:3px}
.ek-form select,.ek-form input[type=number]{width:100%}
@media (max-width:520px){
.od-tutar{text-align:left}
.pos-cerceve{min-height:640px}
}
/* =====================================================================
GALERİ TAHSİLATI — hazır bağlantı, QR, müşteri ödeme sayfası
===================================================================== */
.tahsilat-hazir{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.th-qr{flex:0 0 auto;width:188px}
.th-qr svg{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--r)}
.th-bilgi{flex:1 1 300px;min-width:0}
.th-link{display:flex;gap:8px;align-items:center}
.th-link input{
flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.82rem;background:var(--bg-2)
}
.od-baslik{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.od-tutar-buyuk{text-align:center;padding:18px 0}
.od-tutar-buyuk span{display:block;font-size:.76rem;color:var(--muted);font-weight:600}
.od-tutar-buyuk b{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.od-guven{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.od-guven > div{
display:flex;gap:10px;align-items:flex-start;
font-size:.82rem;line-height:1.5;color:var(--muted)
}
.od-guven .ikon{flex:0 0 auto;margin-top:2px;color:var(--ok)}
.od-guven b{color:var(--ink);font-weight:700}
.od-sonuc{
width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
display:grid;place-items:center
}
.od-sonuc.ok {background:var(--ok-soft,#e8f7ee);color:var(--ok)}
.od-sonuc.yok{background:var(--uyari-soft,#fdf3e2);color:var(--uyari,#b7791f)}
@media (max-width:560px){
.tahsilat-hazir{flex-direction:column;align-items:stretch}
.th-qr{width:100%;max-width:240px;margin:0 auto}
.od-tutar-buyuk b{font-size:2rem}
}
/* Pazaryeri kart formu — yalnizca musterinin odeme sayfasinda */
.kart-kutu{
border:1px solid var(--line-2);border-radius:var(--r);
padding:16px;margin-bottom:14px;background:var(--bg-2)
}
.kart-kutu .form-group{margin-bottom:12px}
.kart-kutu .form-group:last-child{margin-bottom:0}
.kart-satir{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.kart-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
@media (max-width:420px){ .kart-satir{grid-template-columns:1fr 1fr} }
/* =====================================================================
PANEL MENÜSÜNDE VURGULU SATIR
"Ödeme Al" gibi günde onlarca kez kullanılan bir eylem, otuz satırlık
bir menüde ötekilerle aynı görünmemeli.
===================================================================== */
.panel-menu a.vurgu{
background:var(--brand-soft);
border:1px solid var(--brand);
color:var(--ink);
font-weight:800;
margin-bottom:4px
}
.panel-menu a.vurgu:hover{background:var(--brand);color:var(--logo-ink,#111)}
.panel-menu a.vurgu.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Kapali (izin verilmemis) satir — var oldugu gorunsun ama davet etmesin */
.panel-menu a.kapali{opacity:.55}
.panel-menu a.kapali:hover{opacity:.85}
/* Kurulum kontrol listesi — hangi adim eksik, tek bakista */
.kurulum-liste{display:flex;flex-direction:column;gap:2px}
.kurulum-adim{
display:flex;align-items:center;gap:12px;
padding:11px 12px;border-radius:var(--r);
border:1px solid transparent
}
.kurulum-adim + .kurulum-adim{border-top:1px solid var(--line-2)}
.kurulum-adim.eksik{background:var(--uyari-soft,#fdf3e2);border-color:var(--line-2)}
.kurulum-adim > div{flex:1;min-width:0}
.kurulum-adim .btn{flex:0 0 auto}
.kurulum-no{
flex:0 0 auto;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;font-size:.8rem;font-weight:800;
background:var(--line-2);color:var(--muted)
}
.kurulum-adim.tamam .kurulum-no{background:var(--ok,#1f9254);color:#fff}
.kurulum-adim.eksik .kurulum-no{background:var(--uyari,#e0a33e);color:#fff}
@media (max-width:560px){
.kurulum-adim{flex-wrap:wrap}
.kurulum-adim .btn{margin-left:38px}
}
/* ---------------------------------------------------------------------
RAPOR — tablo ici oran cubugu
Yanindaki sutun sayiyi zaten yaziyor; cubuk yalnizca siralamayi
gozle yakalatir. Renk tek basina bilgi tasimadigi icin aria-label
orani ayrica soyluyor.
--------------------------------------------------------------------- */
.rapor-cubuk{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden;min-width:70px}
.rapor-cubuk span{display:block;height:100%;border-radius:99px;
background:var(--brand-600);min-width:2px}
/* ---------------------------------------------------------------------
HAKEDIS TAKVIMI — "param ne zaman yatacak"
Galerinin en cok sordugu soru; cevabi tutar DEGIL tarihtir, o yuzden
tarih ilk satirda ve buyuk punto.
--------------------------------------------------------------------- */
.hakedis-takvim{border-color:var(--brand-ring)}
.ht-ozet{margin:0 0 10px;font-size:1.04rem;line-height:1.5;color:var(--ink)}
.ht-ozet b:first-child{font-size:1.32rem}
.ht-liste{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line-2)}
.ht-satir{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
padding:8px 0;border-bottom:1px solid var(--line-2)}
.ht-satir:last-child{border-bottom:0}
.ht-tarih{font-weight:600;color:var(--ink-2)}
.ht-adet{font-size:.8rem;color:var(--muted)}
.ht-tutar{text-align:right;min-width:96px}
.ht-simdi .ht-tarih{color:var(--warn)}
@media (max-width:520px){
.ht-satir{grid-template-columns:1fr auto}
.ht-adet{grid-column:1;order:3;margin-top:-4px}
}
/* Panel menusunde "hazir" rozeti — kurulum bitince yesil onay */
.panel-menu .say-ok{background:var(--ok);color:#fff}
/* ---------------------------------------------------------------------
GALERI ADRESI — "kendi adresim"
Adres, galerinin kartvizitine yazacagi sey; ekranda da kartvizit
gibi duruyor: buyuk, secilebilir, yaninda kopyala.
--------------------------------------------------------------------- */
.adres-kutu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
background:var(--line-2);border-radius:var(--r);padding:12px 14px}
.adres-yazi{font-weight:700;font-size:1.06rem;word-break:break-all;flex:1;min-width:180px;
-webkit-user-select:all;user-select:all}
.adres-secim{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.adres-secim input{flex:1;min-width:150px;border-top-right-radius:0;border-bottom-right-radius:0;
text-align:right;font-weight:700}
.adres-son{display:flex;align-items:center;padding:0 12px;background:var(--line-2);
border:1px solid var(--line);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0;
font-weight:700;color:var(--muted);white-space:nowrap}
@media (max-width:420px){
.adres-secim input{border-radius:var(--r-sm);text-align:left}
.adres-son{border-left:1px solid var(--line);border-radius:var(--r-sm);margin-top:6px}
}
/* ---------------------------------------------------------------------
KVKK ONAY KUTUSU (iletisim formu)
Onay metni formun geri kalanindan ayrilsin ama goz ardi edilecek
kadar da silik olmasin: zorunlu bir karar veriliyor.
--------------------------------------------------------------------- */
.kvkk-kutu{background:var(--line-2);border-radius:var(--r);padding:14px;margin:4px 0 16px}
.kvkk-kutu .check{align-items:flex-start;gap:9px}
.kvkk-kutu .check input{margin-top:3px;flex:none}
.kvkk-kutu a{text-decoration:underline}
/* Yonetim: taksit farki oran izgarasi — 11 kucuk kutu, tek bakista */
.taksit-oran-izgara{display:grid;gap:8px;
grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.taksit-oran{display:block}
.taksit-oran .tor-ad{display:block;font-size:.78rem;color:var(--muted);margin-bottom:3px}
.taksit-oran .tor-giris{display:flex;align-items:stretch}
.taksit-oran input{border-top-right-radius:0;border-bottom-right-radius:0;min-width:0}
.taksit-oran .tor-yuzde{display:flex;align-items:center;padding:0 9px;background:var(--line-2);
border:1px solid var(--line);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0;
color:var(--muted);font-weight:700}
.taksit-oran.pasif{opacity:.5}
/* Oran izgarasinda "uygulanan" sonucu — taban + firma payi */
.taksit-oran .tor-sonuc{display:block;font-size:.75rem;font-weight:700;
color:var(--brand-700);margin-top:3px;text-align:right}
/* =====================================================================
TAKSIT HESAP MAKINESI (galeri "Odeme Al")
Galeri bu ekrani tezgahta musteriye cevirerek gosteriyor. Tasarim
karari bu cumleden cikti:
· Butun taksitlerin AYLIK tutari ayni anda gorunur. Onceki surumde
dugmelerde yalnizca sayi vardi ve "6 mi 9 mu" sorusu tek tek
tiklamayi gerektiriyordu.
· Tek bir BUYUK sonuc var; gerisi onun kirilimi.
· Rakamlar tabular-nums ile hizali: yazarken rakamlar zipladiginda
ekran hesap makinesi degil form gibi duruyor.
===================================================================== */
.hesap-kart{border-color:var(--brand-ring);box-shadow:var(--sh)}
.hs-govde{display:flex;flex-direction:column;gap:18px}
.hs-adim{display:flex;flex-direction:column;gap:8px}
.hs-lbl{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted)}
/* ---- Tutar ---- */
.hs-tutar-satir{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hs-giris{display:flex;align-items:stretch;flex:1;min-width:220px;max-width:340px;
border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);
transition:border-color .15s,box-shadow .15s}
.hs-giris:focus-within{border-color:var(--brand-600);box-shadow:0 0 0 4px var(--brand-ring)}
.hs-para{display:flex;align-items:center;padding:0 4px 0 16px;font-size:1.3rem;
font-weight:800;color:var(--muted-2)}
.hs-giris input{flex:1;min-width:0;border:0;background:transparent;outline:none;
font-size:1.9rem;font-weight:800;color:var(--ink);padding:12px 16px 12px 6px;
font-variant-numeric:tabular-nums}
@media (max-width:420px){ .hs-giris input{font-size:1.5rem} }
.hs-hizli{display:flex;gap:6px;flex-wrap:wrap}
.hs-chip{padding:7px 12px;border:1px solid var(--line);background:var(--card);
border-radius:999px;font-size:.82rem;font-weight:700;color:var(--muted-2);cursor:pointer;
transition:background .12s,border-color .12s,color .12s}
.hs-chip:hover{border-color:var(--brand-600);background:var(--brand-soft);color:var(--ink-2)}
/* ---- Icinden / Disindan anahtari ----
Iki ayri soru, iki ayri mod. Segment kontrolu sekmeye benzemesin
diye kart icinde ve kucuk; ama hangi modda oldugu her an okunur. */
.hs-yon{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;
background:var(--line-2);border-radius:var(--r);max-width:520px}
.hs-yon-d{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border:0;
background:transparent;border-radius:var(--r-sm);cursor:pointer;text-align:left;
transition:background .12s,box-shadow .12s}
.hs-yon-d b{font-size:.92rem;color:var(--muted-2)}
.hs-yon-d span{font-size:.73rem;color:var(--muted);line-height:1.25}
.hs-yon-d:hover{background:rgba(255,255,255,.55)}
.hs-yon-d.aktif{background:var(--card);box-shadow:var(--sh-sm)}
.hs-yon-d.aktif b{color:var(--ink)}
@media (max-width:520px){ .hs-yon{grid-template-columns:1fr} }
/* Disindan modda asil cevap "cekilecek tutar"dir; makbuzun ilk satiri
one cikar, hedef net teyit satiri olarak altta kalir. */
.yon-disindan .hs-dagilim .hs-kalem:first-child b{font-size:1.1rem;color:var(--ink)}
/* ---- Taksit izgarasi ---- */
/* 12 taksit 6+6 diye kirilsin: auto-fit 8+4 veriyordu ve alt satirda
dort kutu ortada asili kaliyordu. Sabit sutun sayisi daha duzenli. */
.hs-izgara{display:grid;gap:8px;grid-template-columns:repeat(6,1fr)}
@media (max-width:820px){ .hs-izgara{grid-template-columns:repeat(4,1fr)} }
@media (max-width:520px){ .hs-izgara{grid-template-columns:repeat(3,1fr)} }
.hs-kutu{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:10px 6px;border:1.5px solid var(--line);background:var(--card);
border-radius:var(--r-sm);cursor:pointer;text-align:center;
transition:border-color .12s,background .12s,transform .08s}
/* Hover YALNIZCA cerceveyi degistiriyor. Once dolgu da degisiyordu ve
uzerinden gecilen kutu secili kutuyla karistirilabiliyordu — secim
tek basina dolgunun isi olmali. */
.hs-kutu:hover{border-color:var(--brand-600)}
.hs-kutu:active{transform:translateY(1px)}
.hs-kutu:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.hs-kutu .hsk-ust{font-size:1.12rem;font-weight:800;color:var(--ink);line-height:1.1;
font-variant-numeric:tabular-nums}
.hs-kutu .hsk-alt{font-size:.74rem;font-weight:600;color:var(--muted);white-space:nowrap;
font-variant-numeric:tabular-nums}
.hs-kutu.aktif{border-color:var(--brand-600);background:var(--brand);
box-shadow:0 2px 10px rgba(234,179,8,.28)}
.hs-kutu.aktif .hsk-ust{color:#20160a}
.hs-kutu.aktif .hsk-alt{color:#4a3a10}
/* ---- Sonuc ---- */
.hs-sonuc{display:grid;gap:0;grid-template-columns:1fr minmax(240px,340px);
border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
@media (max-width:700px){ .hs-sonuc{grid-template-columns:1fr} }
.hs-hero{display:flex;flex-direction:column;justify-content:center;gap:4px;
padding:20px 22px;background:var(--grad-yuzey,var(--card));
border-right:1px solid var(--line)}
@media (max-width:700px){ .hs-hero{border-right:0;border-bottom:1px solid var(--line)} }
.hs-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--brand-700)}
.hs-rakam{font-size:2.7rem;line-height:1.02;font-weight:800;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:420px){ .hs-rakam{font-size:2.05rem} }
.hs-carpim{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hs-dagilim{padding:16px 18px;background:var(--line-2);display:flex;flex-direction:column;gap:3px}
/* Oransal cubuk: tek eksen, iki parca, ikisi de dogrudan etiketli.
Kesinti icin KIRMIZI kullanilmiyor — kirmizi bu arayuzde hata rengi,
buradaki kesinti bir ariza degil sozlesmenin parcasi. */
.hs-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;
margin:10px 0 8px}
.hs-bar-net{display:block;height:100%;border-radius:999px;background:var(--ok);
transition:width .18s ease}
.hs-kalem{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
font-size:.84rem;color:var(--muted);padding:3px 0}
.hs-kalem b{color:var(--ink-2);font-size:.92rem;white-space:nowrap;
font-variant-numeric:tabular-nums}
.hsk-oran{font-size:.76rem;color:var(--muted-2)}
.hs-kalem-net b{color:var(--ok);font-size:1.22rem;font-weight:800}
.hs-kalem-net .hsk-ad{font-weight:700;color:var(--ink-2)}
/* .hs-kalem-ayrac artik kullanilmiyor: ayirici gorevini oransal cubuk
goruyor, makbuz sirasi da degisti. */
/* ---- Eylem ---- */
.hs-eylem{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* ---- Karsilastirma tablosu ---- */
.hs-tablo summary{cursor:pointer;color:var(--muted);font-weight:700}
.hs-tablo summary:hover{color:var(--ink-2)}
.hs-tablo td{font-variant-numeric:tabular-nums}
.hs-tablo tbody tr{cursor:pointer}
.hs-tablo tbody tr:hover{background:var(--brand-soft)}
.hs-tablo tbody tr.hs-secili{background:var(--brand-soft);
box-shadow:inset 3px 0 0 var(--brand-600)}
/* ---------------------------------------------------------------
TEZGÂH KİPİ (sade sayfa)
Tablet müşteriye çevrildiğinde gezinti kalmıyor; başlık yalnızca
logoyu taşıyor ve tıklanmıyor.
--------------------------------------------------------------- */
.sade-header .container{justify-content:center}
.sade-header .logo{cursor:default}
.sade-footer{background:none;padding:0;margin:0}
/* Karekod artık açılır kutuda — bkz. galeri/tahsilat.php */
.th-qr-katla{flex:0 0 auto}
.th-qr-katla summary{list-style:none;cursor:pointer;display:inline-flex}
.th-qr-katla summary::-webkit-details-marker{display:none}
.th-qr-katla[open] summary{margin-bottom:10px}
/* =====================================================================
SATIŞ DOSYASI (galeri/satis-dosyasi.php)
===================================================================== */
.sd-akis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}
.sd-akis>div{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-2)}
.sd-akis>div>b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--brand);color:#20160a;
display:grid;place-items:center;font-size:.8rem}
.sd-slotlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1px;background:var(--line)}
.sd-slot{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sd-slot-bas{display:flex;gap:10px;align-items:flex-start}
.sd-isaret{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center}
.sd-var .sd-isaret{background:var(--brand);color:#20160a}
.sd-eksik .sd-isaret{background:var(--line-2);color:var(--err)}
.sd-dosya{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 10px;border:1px solid var(--line);
border-radius:10px;font-size:.84rem}
.sd-ad{display:inline-flex;align-items:center;gap:6px;font-weight:600;min-width:0;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 140px}
.sd-kaldir{margin-left:auto}
.sd-not{flex-basis:100%;color:var(--err);font-size:.8rem;display:flex;gap:6px;align-items:flex-start}
.sd-sec{position:relative;overflow:hidden;cursor:pointer;align-self:flex-start}
.sd-sec input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.sd-secim{margin-bottom:14px}
/* İnceleme gövdesi (yönetim + denetim) */
.sdi-ust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px;margin-bottom:16px}
.sdi-kutu{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.sdi-et{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.sdi-buyuk{font-size:1.3rem}
.sdi-eksik td{background:var(--err-soft)}
.sdi-karar{display:flex;flex-direction:column;gap:6px}
.sdi-karar input[type=text]{padding:6px 9px;font-size:.82rem}
.sdi-dugmeler{display:flex;gap:6px;flex-wrap:wrap}
.sdi-tablo td{vertical-align:top}
/* Denetim paneli (denetim/) */
.dn-govde{background:var(--line-2);min-height:100vh}
.dn-ust{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.dn-ust-ic{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.dn-marka{display:flex;align-items:center;gap:10px}
.dn-rozet{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:#fff;border-radius:999px;padding:4px 10px}
.dn-menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.dn-menu a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;font-weight:600;font-size:.88rem;color:var(--ink-2)}
.dn-menu a:hover{background:var(--line-2)}
.dn-menu a.aktif{background:var(--brand);color:#20160a}
.dn-kim{font-size:.8rem;color:var(--muted);padding:0 8px}
.dn-icerik{padding-top:24px;padding-bottom:40px}
.dn-suzgec{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.dn-suzgec .form-group{margin:0}
.dn-suzgec input,.dn-suzgec select{padding:7px 10px;font-size:.86rem}
/* =====================================================================
SAHA PANELİ (saha/) — telefonda kullanılır
===================================================================== */
.sh-body{background:var(--line-2);min-height:100vh}
.sh-ust{background:#fff;border-bottom:1px solid var(--line)}
.sh-ust-ic{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}
.sh-marka{display:flex;align-items:center;gap:8px}
.sh-rozet{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
background:var(--ink);color:#fff;border-radius:999px;padding:3px 9px}
.sh-sag{display:flex;align-items:center;gap:6px}
.sh-kim{font-size:.8rem;color:var(--muted);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-cikis{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--ink-2)}
.sh-cikis:hover{background:var(--line-2)}
.sh-menu{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.sh-menu-ic{display:flex;gap:4px;overflow-x:auto}
.sh-menu a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 16px;
font-size:.76rem;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;min-width:76px}
.sh-menu a.aktif{color:var(--ink);border-bottom-color:var(--brand)}
.sh-icerik{padding-top:18px;padding-bottom:36px}
.sh-liste{display:flex;flex-direction:column}
.sh-satir{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;
border-top:1px solid var(--line);flex-wrap:wrap;color:inherit}
.sh-liste .sh-satir:first-child{border-top:0}
a.sh-satir:hover{background:var(--line-2)}
.sh-eylem{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sh-yukle{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){
.sh-menu a{flex:1 1 0;min-width:0;padding:10px 6px}
.sh-satir{align-items:flex-start}
}
.sd-sec.sd-bekle{opacity:.6;pointer-events:none}
/* Kamera düğmesi yalnızca dokunmatik cihazlarda görünsün */
@media (hover:hover) and (pointer:fine){ .sd-kamera{display:none} }
/* =====================================================================
GALERİ BAŞVURUSU — İNCELEME (yönetim + PayNkolay)
===================================================================== */
.gbi-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px;margin-bottom:14px}
.gbi-kutu{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.gbi-kutu>*{max-width:100%;overflow-wrap:anywhere}
.gbi-et{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}
.gbi-buyuk{font-size:1.05rem;line-height:1.25}
.gbi-adim{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 16px;flex-wrap:wrap}
.gbi-adim li{flex:1 1 180px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
border-radius:12px;padding:10px 12px;font-size:.84rem;font-weight:600;color:var(--muted-2)}
.gbi-adim li span{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;
background:var(--line-2);color:var(--muted-2);font-size:.78rem;font-weight:800}
.gbi-adim li.tamam{color:var(--ink-2);border-color:var(--ok)}
.gbi-adim li.tamam span{background:var(--ok);color:#fff}
.gbi-adim li.aktif{color:var(--ink);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.gbi-adim li.aktif span{background:var(--brand);color:#20160a}
.gbi-adim li b{margin-left:auto;font-size:.76rem;color:var(--muted)}
.gbi-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1px;background:var(--line)}
.gbi-kart{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.gbi-kart.gbi-eksik{background:var(--err-soft)}
.gbi-kart-bas{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gbi-bos{font-size:.84rem;color:var(--muted);padding:14px;border:1px dashed var(--line);border-radius:10px;text-align:center}
.gbi-dosya{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;
border:1px solid var(--line);border-radius:12px;padding:8px}
.gbi-onizleme{position:relative;display:block;width:96px;height:96px;border-radius:9px;overflow:hidden;
background:var(--line-2);display:grid;place-items:center}
.gbi-onizleme img{width:100%;height:100%;object-fit:cover;display:block}
.gbi-pdf{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;font-weight:800;color:var(--muted-2)}
.gbi-muhur{position:absolute;left:4px;bottom:4px;display:inline-flex;align-items:center;gap:3px;
font-size:.66rem;font-weight:800;padding:2px 6px;border-radius:999px;color:#fff}
.gbi-ok{background:var(--ok)} .gbi-ret{background:var(--err)}
.gbi-bilgi{min-width:0}
.gbi-baglanti{font-size:.78rem;font-weight:700;margin-top:4px}
.gbi-karar{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.gbi-karar input[type=text]{padding:7px 10px;font-size:.82rem}
.gbi-dugmeler{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:520px){
.gbi-dosya{grid-template-columns:72px 1fr}
.gbi-onizleme{width:72px;height:72px}
}
/* ---- Saha paneli: başvuru ekranı (tablet öncelikli) ---- */
.sh-adim{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 14px;flex-wrap:wrap}
.sh-adim li{flex:1 1 150px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
border-radius:12px;padding:11px 13px;font-size:.86rem;font-weight:700;color:var(--muted-2)}
.sh-adim li span{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:var(--line-2);color:var(--muted-2);font-size:.8rem;font-weight:800}
.sh-adim li.tamam{color:var(--ink-2);border-color:var(--ok)}
.sh-adim li.tamam span{background:var(--ok);color:#fff}
.sh-adim li.aktif{color:var(--ink);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.sh-adim li.aktif span{background:var(--brand);color:#20160a}
.sh-ilerleme{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:800;color:var(--ink-2)}
.sh-cubuk{display:block;width:110px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.sh-cubuk i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .25s}
.sh-evrak-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1px;background:var(--line)}
.sh-evrak{background:#fff;padding:15px 16px;display:flex;flex-direction:column;gap:11px;min-width:0}
.sh-evrak.sh-eksik{background:#fffdf7}
.sh-evrak-bas{display:flex;gap:10px;align-items:flex-start}
.sh-evrak-ad{flex:1;min-width:0}
.sh-isaret{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center}
.sh-var .sh-isaret{background:var(--ok);color:#fff}
.sh-eksik .sh-isaret{background:var(--line-2);color:var(--warn)}
.sh-kucukler{display:flex;gap:8px;flex-wrap:wrap}
.sh-kucuk{position:relative;width:78px;height:78px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--line-2)}
.sh-kucuk.sh-ret{border-color:var(--err);box-shadow:0 0 0 2px var(--err-soft)}
.sh-kucuk>a{display:grid;place-items:center;width:100%;height:100%}
.sh-kucuk img{width:100%;height:100%;object-fit:cover;display:block}
.sh-pdf{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:800;color:var(--muted-2)}
.sh-muhur{position:absolute;left:4px;bottom:4px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;color:#fff}
.sh-m-ok{background:var(--ok)} .sh-m-ret{background:var(--err)}
.sh-sil{position:absolute;top:0;right:0}
.sh-sil button{width:24px;height:24px;border:0;border-radius:0 0 0 9px;background:rgba(15,23,42,.72);color:#fff;
display:grid;place-items:center;cursor:pointer;padding:0}
.sh-sil button:hover{background:var(--err)}
.sh-not{display:flex;gap:6px;align-items:flex-start;font-size:.8rem;color:var(--err)}
.sh-dugme{flex:1 1 auto;justify-content:center;min-height:46px;font-size:.92rem}
.sh-gonder{position:sticky;bottom:0;z-index:15;background:#fff;border:1px solid var(--line);
border-radius:14px;box-shadow:0 -6px 20px rgba(15,23,42,.08);margin-bottom:12px}
.sh-gonder-ic{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;flex-wrap:wrap}
.sh-gonder-ic .btn{min-height:48px;padding-inline:26px}
@media (min-width:900px){
.sh-icerik{max-width:1120px}
.sh-evrak{padding:18px 20px}
}
/* ---- Panel içi kamera (kamera.js) ---- */
.km-katman{position:fixed;inset:0;z-index:120;background:rgba(9,13,20,.86);display:flex;align-items:center;justify-content:center;padding:14px}
.km-katman[hidden]{display:none}
.km-kutu{background:#0f172a;color:#fff;border-radius:18px;width:min(720px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.km-ust{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.km-kapat{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer;width:38px;height:38px;border-radius:10px}
.km-kapat:hover{background:rgba(255,255,255,.12)}
.km-sahne{position:relative;background:#000;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.km-sahne video{width:100%;height:100%;object-fit:cover}
.km-ipucu{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);margin:0;font-size:.78rem;
background:rgba(0,0,0,.55);padding:5px 12px;border-radius:999px;white-space:nowrap}
.km-serit{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;min-height:54px}
.km-kucuk{position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.km-kucuk img{width:100%;height:100%;object-fit:cover;display:block}
.km-kucuk button{position:absolute;top:0;right:0;width:20px;height:20px;border:0;border-radius:0 0 0 7px;
background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;cursor:pointer;padding:0;line-height:1}
.km-alt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
border-top:1px solid rgba(255,255,255,.12)}
.km-alt .btn{min-height:46px}
.km-deklansor{width:66px;height:66px;border-radius:50%;border:4px solid rgba(255,255,255,.85);background:transparent;cursor:pointer;
display:grid;place-items:center;padding:0}
.km-deklansor span{width:46px;height:46px;border-radius:50%;background:var(--brand);display:block;transition:transform .1s}
.km-deklansor:active span{transform:scale(.88)}
/* ---- Denetim: işler panosu, çubuklar ---- */
.dn-is-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.dn-is{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:14px;
padding:16px 18px;color:var(--ink-2)}
.dn-is:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.dn-is-say{font-size:1.9rem;font-weight:800;line-height:1.05;color:var(--muted-2)}
.dn-is.dn-dolu .dn-is-say{color:var(--ink)}
.dn-is.dn-uyari{border-color:var(--err)}
.dn-is.dn-uyari .dn-is-say{color:var(--err)}
.dn-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:0 16px}
.dn-cubuklar{display:flex;flex-direction:column;gap:9px}
.dn-cubuk-satir{display:grid;grid-template-columns:76px 1fr auto auto;align-items:center;gap:10px;font-size:.84rem}
.dn-cubuk-ad{font-weight:700;color:var(--muted-2)}
.dn-cubuk{display:block;height:9px;border-radius:99px;background:var(--line);overflow:hidden;min-width:60px}
.dn-cubuk i{display:block;height:100%;background:var(--brand);border-radius:99px}
.dn-cubuk-deger{white-space:nowrap}
@media (max-width:560px){
.dn-cubuk-satir{grid-template-columns:64px 1fr auto}
.dn-cubuk-satir .tiny{display:none}
}