/* OTOKABUL.COM.TR — ana sayfa (açık tema, sihirbaz stilleri site.css'te) */
body.ana{background:#fff;color:var(--murekkep)}
.ana .kap{max-width:1200px}

/* üst şerit */
.serit{background:var(--murekkep);color:#c9d4e4;font-size:13px}
.serit-ic{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.serit-baglar{display:flex;gap:22px;align-items:center}
.serit a,.serit span{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#c9d4e4}
.serit a:hover{color:#fff}
.serit svg{width:14px;height:14px;fill:var(--vurgu)}
.serit [hidden]{display:none!important}

/* başlık */
.ana .ust{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);color:var(--murekkep);border-bottom:1px solid #eef0f3;box-shadow:0 1px 0 rgba(15,27,45,.02)}
.ana .ust-ic{height:74px}
.ana .logo{font-size:26px}
.ana .logo-b{color:var(--murekkep)}
.logo-c{font:700 13px Manrope,sans-serif;color:var(--gri);margin-left:3px;letter-spacing:.3px}
.ana .ust nav{gap:26px;font-size:15px}
.ana .ust nav a{color:#334155;font-weight:500}
.ana .ust nav a:hover{color:var(--vurgu2)}
.ana .ust-tel{background:#fff3ec;color:var(--vurgu2)!important;font-weight:700}
.ust-cta{background:var(--murekkep);color:#fff!important;padding:10px 18px;border-radius:999px;font-weight:700!important}
.ust-cta:hover{background:var(--murekkep2)}

/* kahraman */
.ana .kahraman{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7f5f0 0%,#fbfaf7 70%,#fff 100%);color:var(--murekkep);padding:56px 0 72px}
.kahraman-desen{position:absolute;right:-60px;top:-40px;width:720px;height:720px;fill:#ffe8dc;opacity:.75;pointer-events:none}
.ana .kahraman-ic{position:relative;grid-template-columns:1fr 520px;gap:56px}
.ana .etiket{border:0;background:#fff;color:var(--murekkep2);box-shadow:0 1px 0 #ece8df,0 6px 18px -10px rgba(15,27,45,.25);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.ana .etiket i{width:8px;height:8px;border-radius:50%;background:var(--yesil);box-shadow:0 0 0 4px #dcfce7}
.ana .kahraman h1{font-size:56px;line-height:1.04;letter-spacing:-2px;color:var(--murekkep)}
.ana .kahraman h1 em{color:var(--vurgu)}
.ana .kahraman .alt{color:#475569;font-size:18px;max-width:540px}
.secim-kartlari{display:grid;gap:12px;max-width:540px;margin:0 0 30px}
.secim-karti{display:grid;grid-template-columns:56px 1fr 20px;gap:14px;align-items:center;background:#fff;border:1px solid #ece8df;border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--murekkep);transition:transform .15s,box-shadow .15s,border-color .15s}
.secim-karti:hover{transform:translateY(-2px);border-color:#ffc6ad;box-shadow:0 16px 30px -18px rgba(255,90,31,.55)}
.secim-karti b{display:block;font:800 17px Manrope,sans-serif}
.secim-karti small{color:var(--gri);font-size:13.5px;line-height:1.4}
.secim-karti .ok{font-size:28px;color:#c2c8d1;line-height:1}
.secim-ikon{width:56px;height:56px;border-radius:14px;background:#fff1ea;display:grid;place-items:center}
.secim-ikon svg{width:34px;height:34px;fill:none;stroke:var(--vurgu);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.secim-ikon .tik{stroke:var(--yesil)}
.secim-ikon.yesil{background:#e9fbef}
.secim-ikon.yesil svg{stroke:#16a34a}
.secim-ikon .dolu{fill:#16a34a;stroke:none}
.ana .guven b{color:var(--murekkep);font-size:26px}
.ana .guven span{color:var(--gri)}
.ana .sihirbaz{border:1px solid #ece8df;box-shadow:0 30px 70px -30px rgba(15,27,45,.45)}
.sb-baslik{display:flex;align-items:center;gap:8px;font:700 13px Manrope,sans-serif;color:var(--yesil);margin:-4px 0 12px}
.sb-baslik .nokta{width:8px;height:8px;border-radius:50%;background:var(--yesil);box-shadow:0 0 0 4px #dcfce7}

/* güven şeridi */
.guven-serit{padding:0 0 10px;margin-top:-28px;position:relative;z-index:2}
.guven-serit-ic{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid #ece8df;border-radius:20px;box-shadow:0 18px 40px -26px rgba(15,27,45,.35)}
.gs-kalem{display:flex;gap:12px;align-items:flex-start;padding:20px 22px}
.gs-kalem + .gs-kalem{border-left:1px solid #f0ede6}
.gs-kalem b{display:block;font:800 15px Manrope,sans-serif}
.gs-kalem small{color:var(--gri);font-size:13px;line-height:1.4}
.gs-ikon{flex:0 0 40px;height:40px;border-radius:12px;background:#f5f3ee;display:grid;place-items:center}
.gs-ikon svg{width:22px;height:22px;fill:none;stroke:var(--murekkep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* bölüm başlıkları */
.bolum-bas{text-align:center;max-width:680px;margin:0 auto 40px}
.bolum-bas.sol{text-align:left;margin:0}
.bolum-bas h2{font-size:42px;letter-spacing:-1.4px;line-height:1.1;margin:0 0 12px}
.bolum-bas p{color:#475569;font-size:17px;margin:0}
.ust-etiket{display:inline-block;font:800 12.5px Manrope,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--vurgu2);margin:0 0 10px!important}
.ust-etiket.acik{color:#ff9a6c}
.orta{text-align:center;margin-top:34px}
.btn-buyuk{display:inline-block;text-decoration:none;padding:16px 30px;font-size:16px;border-radius:14px}
.metin-link{color:var(--vurgu2);font-weight:700;text-decoration:none}
.metin-link:hover{text-decoration:underline}

/* nasıl çalışır */
.ana .nasil{padding:88px 0 80px;background:#fff}
.adim-kartlari{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.adim-kartlari article{background:#f7f5f0;border-radius:20px;overflow:hidden;position:relative;padding:0 22px 24px}
.adim-gorsel{margin:0 -22px 18px;height:150px;display:grid;place-items:center;background:linear-gradient(160deg,#fff1ea,#ffe2d3)}
.adim-gorsel.g2{background:linear-gradient(160deg,#eef4ff,#dfe9fb)}
.adim-gorsel.g3{background:linear-gradient(160deg,#f1f5f9,#e2e8f0)}
.adim-gorsel.g4{background:linear-gradient(160deg,#ecfdf3,#d5f5e1)}
.adim-gorsel svg{width:200px;height:120px}
.adim-gorsel .cerceve{fill:#fff;stroke:var(--murekkep);stroke-width:3}
.adim-gorsel .acik{fill:#e5e7eb}
.adim-gorsel .vurgu{fill:var(--vurgu)}
.adim-gorsel .halka{fill:#fff;stroke:var(--vurgu);stroke-width:3}
.adim-gorsel .halka-yesil{fill:#16a34a}
.adim-gorsel .tik{fill:none;stroke:#16a34a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.adim-gorsel.g4 .tik{stroke:#fff}
.adim-gorsel .etiket-sekil{fill:#fff;stroke:var(--murekkep);stroke-width:3}
.adim-gorsel .delik{fill:#dfe9fb;stroke:var(--murekkep);stroke-width:2}
.adim-gorsel .fiyat-yazi{font:800 30px Manrope,sans-serif;fill:var(--vurgu)}
.adim-gorsel .cizgi-grafik{fill:none;stroke:#3b82f6;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.adim-gorsel .kasa,.adim-gorsel .kasa-ust{fill:#fff;stroke:var(--murekkep);stroke-width:3;stroke-linejoin:round}
.adim-gorsel .teker{fill:var(--murekkep)}
.adim-gorsel .arti{stroke:var(--vurgu);stroke-width:3.5;stroke-linecap:round}
.adim-gorsel .kart-sekil{fill:#fff;stroke:var(--murekkep);stroke-width:3}
.adim-gorsel .serit-sekil{fill:var(--murekkep)}
.adim-no{position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;background:var(--murekkep);color:#fff;display:grid;place-items:center;font:800 14px Manrope,sans-serif}
.adim-kartlari h3{font-size:19px;margin:0 0 6px;letter-spacing:-.3px}
.adim-kartlari p{margin:0;color:#4b5563;font-size:15px}

/* markalar */
.markalar{padding:80px 0;background:#f7f5f0}
.marka-izgara{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.marka-izgara button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid #ece8df;border-radius:16px;padding:20px 10px;font:700 14px Manrope,sans-serif;color:var(--murekkep);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;min-height:112px}
.marka-izgara button:hover{transform:translateY(-2px);border-color:#ffc6ad;box-shadow:0 14px 26px -18px rgba(255,90,31,.6)}
.marka-izgara img{height:40px;max-width:96px;object-fit:contain}
.marka-izgara .harf{width:40px;height:40px;border-radius:50%;background:var(--murekkep);color:#fff;display:grid;place-items:center;font-weight:800}
.marka-izgara small{font:500 12px Inter,sans-serif;color:var(--gri)}
.marka-izgara .iskelet{background:linear-gradient(90deg,#efece5,#f7f5f0,#efece5);background-size:200% 100%;animation:iskelet 1.2s infinite;border:0}
@keyframes iskelet{to{background-position:-200% 0}}

/* fiyat bölümü */
.fiyat-bolum{background:var(--murekkep);color:#fff;padding:88px 0;overflow:hidden;position:relative}
.fiyat-bolum::before{content:"";position:absolute;right:-200px;top:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,#24395a 0,transparent 65%)}
.fiyat-ic{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center;position:relative}
.fiyat-bolum h2{font-size:40px;letter-spacing:-1.3px;line-height:1.12;margin:0 0 14px}
.fiyat-bolum .aciklama{color:#b8c6db;font-size:17px;margin:0 0 26px;max-width:560px}
.fiyat-adim{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:fa}
.fiyat-adim li{display:grid;grid-template-columns:40px 1fr;gap:14px;counter-increment:fa;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px}
.fiyat-adim li::before{content:counter(fa);grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--vurgu);display:grid;place-items:center;font:800 16px Manrope,sans-serif}
.fiyat-adim b{font:800 16px Manrope,sans-serif}
.fiyat-adim span{color:#b8c6db;font-size:14.5px}
.analiz-kart{background:#fff;color:var(--murekkep);border-radius:22px;padding:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:rotate(1.5deg)}
.ak-ust{display:flex;justify-content:space-between;align-items:center;font:800 13px Manrope,sans-serif;color:var(--gri);text-transform:uppercase;letter-spacing:1px}
.ak-ust i{font-style:normal;background:#dcfce7;color:#15803d;padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.5px}
.ak-arac{margin:12px 0 16px}
.ak-arac b{display:block;font:800 19px Manrope,sans-serif}
.ak-arac small{color:var(--gri)}
.ak-grafik{display:flex;align-items:flex-end;gap:8px;height:120px;padding:0 4px;border-bottom:2px solid #eef0f3}
.ak-grafik span{flex:1;background:#e7ebf1;border-radius:6px 6px 0 0}
.ak-grafik span.aktif{background:linear-gradient(180deg,#ff8a3d,var(--vurgu))}
.ak-eksen{display:flex;justify-content:space-between;font-size:11.5px;color:var(--gri);margin:6px 2px 14px}
.ak-kalemler{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px;font-size:14px}
.ak-kalemler li{display:flex;justify-content:space-between;background:#f7f5f0;border-radius:9px;padding:7px 11px}
.ak-kalemler .art{color:var(--yesil)}.ak-kalemler .azl{color:var(--kirmizi)}
.ak-sonuc{display:flex;justify-content:space-between;align-items:center;background:var(--murekkep);color:#fff;border-radius:12px;padding:12px 14px;font-size:14px}
.ak-sonuc b{color:#ffb38f;font-family:Manrope,sans-serif}

/* neden */
.neden{padding:88px 0;background:#fff}
.neden-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.neden-kart{border:1px solid #ece8df;border-radius:20px;padding:28px 24px;transition:box-shadow .15s}
.neden-kart:hover{box-shadow:0 20px 40px -28px rgba(15,27,45,.45)}
.nk-ikon{width:52px;height:52px;border-radius:14px;background:#fff1ea;display:grid;place-items:center;margin-bottom:16px}
.nk-ikon svg{width:26px;height:26px;fill:none;stroke:var(--vurgu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.neden-kart h3{font-size:19px;margin:0 0 6px}
.neden-kart p{margin:0;color:#4b5563;font-size:15px}

/* yardım */
.yardim{padding:0 0 88px;background:#fff}
.yardim-kutu{display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(120deg,#fff1ea,#fff8f4);border:1px solid #ffd9c7;border-radius:24px;padding:34px 38px;flex-wrap:wrap}
.yardim-kutu h2{font-size:28px;letter-spacing:-.8px;margin:0 0 6px}
.yardim-kutu p{margin:0;color:#475569}
.yardim-butonlar{display:flex;gap:10px;flex-wrap:wrap}
.yardim-butonlar a{text-decoration:none}
.yardim-butonlar [hidden]{display:none}

/* sss */
.ana .sss{padding:88px 0;background:#f7f5f0;border-top:0}
.sss-ic{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:start}
.ana .sss details{background:#fff;border:1px solid #ece8df;border-radius:14px;padding:18px 20px;margin-bottom:10px}
.ana .sss summary{list-style:none;display:flex;justify-content:space-between;gap:12px}
.ana .sss summary::-webkit-details-marker{display:none}
.ana .sss summary::after{content:"+";font:700 22px/1 Manrope,sans-serif;color:var(--vurgu)}
.ana .sss details[open] summary::after{content:"−"}
.mesaj-form{margin-top:26px;background:#fff;border:1px solid #ece8df;border-radius:16px;padding:22px;box-shadow:0 10px 30px -18px rgba(15,23,42,.25)}
.mesaj-form h3{margin:0 0 4px;font:800 19px Manrope,sans-serif;color:var(--murekkep)}
.mesaj-form .mf-alt{margin:0 0 14px;font-size:14px;color:#64748b}
.mesaj-form label{display:block;margin-bottom:11px}
.mesaj-form label span{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:5px}
.mesaj-form label i{font-style:normal;font-weight:400;color:#94a3b8}
.mesaj-form input,.mesaj-form textarea{width:100%;box-sizing:border-box;border:1.5px solid #e2ddd2;border-radius:10px;padding:11px 12px;font:inherit;font-size:15px;background:#fcfbf8;color:var(--murekkep);transition:border-color .15s,box-shadow .15s}
.mesaj-form textarea{resize:vertical;min-height:96px}
.mesaj-form input:focus,.mesaj-form textarea:focus{outline:0;border-color:var(--vurgu);box-shadow:0 0 0 3px rgba(255,90,31,.15);background:#fff}
.mesaj-form .mf-iki{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mesaj-form .mf-tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mesaj-form .mf-gonder{width:100%;border:0;border-radius:11px;padding:13px;font:700 15.5px Manrope,sans-serif;color:#fff;background:var(--vurgu);cursor:pointer;transition:filter .15s,transform .15s}
.mesaj-form .mf-gonder:hover{filter:brightness(1.06)}
.mesaj-form .mf-gonder:disabled{opacity:.6;cursor:wait}
.mesaj-form .mf-durum{margin-top:10px;font-size:14px;min-height:0}
.mesaj-form .mf-durum.hata{color:#dc2626}
.mesaj-form .mf-durum.tamam{color:#15803d;background:#ecfdf3;border:1px solid #bbf7d0;border-radius:10px;padding:10px 12px}
@media (max-width:620px){.mesaj-form .mf-iki{grid-template-columns:1fr;gap:0}.mesaj-form{padding:18px}}

/* alt bilgi */
.ana .alt-bilgi{background:var(--murekkep);color:#b8c6db;padding:56px 0 0}
.alt-kolonlar{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px}
.alt-kolonlar h4{color:#fff;font:800 15px Manrope,sans-serif;margin:0 0 14px}
.alt-kolonlar a,.alt-kolonlar span{display:block;color:#b8c6db;text-decoration:none;margin-bottom:9px;font-size:14.5px}
.alt-kolonlar a:hover{color:#fff}
.alt-kolonlar [hidden]{display:none}
.ak-marka .logo span{display:inline;margin:0}
.ak-marka p{font-size:14.5px;max-width:320px;margin:14px 0 0}
.ana .alt-bilgi .logo-b{color:#fff}
.alt-son{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #23344f;padding:18px 20px 22px;font-size:13.5px;color:#7d8ea8}
.alt-son b{color:#fff}

@media (max-width:1100px){
  .ana .kahraman-ic{grid-template-columns:1fr 470px;gap:36px}
  .ana .kahraman h1{font-size:46px}
  .marka-izgara{grid-template-columns:repeat(4,1fr)}
  .neden-izgara,.adim-kartlari{grid-template-columns:repeat(2,1fr)}
  .fiyat-ic{grid-template-columns:1fr 400px;gap:40px}
}
@media (max-width:980px){
  .serit .serit-not,.serit #seritAdres{display:none!important}
  .ana .ust nav a.ust-cta{display:inline-block}
  .ana .kahraman-ic{display:flex;flex-direction:column}
  .kahraman-yazi{display:contents}
  .ana .etiket{order:1;align-self:flex-start;margin:0}
  .ana .kahraman h1{order:2;margin:0}
  .ana .kahraman .alt{order:3;margin:0}
  .ana .sihirbaz{order:4}
  .secim-kartlari{order:5}
  .secim-kartlari [data-odak]{display:none}
  .ana .guven{order:6}
  .serit-ic{justify-content:center}
  .ana .ust-ic{height:64px}
  .ana .ust nav a:not(.ust-tel):not(.ust-cta){display:none}
  .ana .kahraman{padding:28px 0 56px}
  .ana .kahraman-ic{gap:18px}
  .ana .kahraman h1{font-size:36px;letter-spacing:-1.2px}
  .ana .kahraman .alt{font-size:16px}
  .kahraman-desen{width:460px;height:460px;right:-180px}
  .secim-kartlari{margin-bottom:20px}
  .guven-serit{margin-top:-24px}
  .guven-serit-ic{grid-template-columns:repeat(2,1fr)}
  .gs-kalem:nth-child(3){border-left:0}
  .gs-kalem:nth-child(n+3){border-top:1px solid #f0ede6}
  .bolum-bas h2,.fiyat-bolum h2{font-size:31px}
  .fiyat-ic{grid-template-columns:1fr}
  .analiz-kart{transform:none;max-width:460px}
  .sss-ic{grid-template-columns:1fr;gap:24px}
  .alt-kolonlar{grid-template-columns:1fr 1fr}
  .ana .nasil,.markalar,.fiyat-bolum,.neden,.ana .sss{padding:60px 0}
  .yardim{padding-bottom:60px}
}
@media (max-width:620px){
  .serit-baglar{gap:16px}
  .ana .guven{gap:18px}.ana .guven b{font-size:20px}
  .ust-cta{padding:8px 13px;font-size:13.5px}
  .ana .ust-tel{display:none!important}
  .ana .logo{font-size:22px}
  .logo-c{font-size:11px}
  .ana .kahraman h1{font-size:31px}
  .secim-karti{grid-template-columns:46px 1fr 14px;padding:12px}
  .secim-ikon{width:46px;height:46px}
  .secim-ikon svg{width:28px;height:28px}
  .guven-serit-ic{grid-template-columns:1fr}
  .gs-kalem + .gs-kalem{border-left:0;border-top:1px solid #f0ede6}
  .adim-kartlari,.neden-izgara{grid-template-columns:1fr}
  .marka-izgara{grid-template-columns:repeat(3,1fr);gap:8px}
  .marka-izgara button{min-height:96px;padding:14px 6px;font-size:13px}
  .marka-izgara img{height:32px}
  .yardim-kutu{padding:26px 22px}
  .alt-kolonlar{grid-template-columns:1fr}
}
/* Windows kaydırma çubuğunda yatay taşmayı önle */
.ana .sb-govde{overflow-x:hidden}
.ana .izgara > *{min-width:0}
.ana .logo-kart span{overflow-wrap:anywhere}

/* panelden yüklenen fotoğraflar */
.adim-gorsel.foto-var{padding:0;background:#e5e7eb}
.adim-gorsel.foto-var img{width:100%;height:100%;object-fit:cover;display:block}
.galeri{padding:80px 0;background:#fff}
.galeri[hidden]{display:none}
.galeri-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galeri-izgara figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#f1eee7}
.galeri-izgara figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.galeri-izgara img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.galeri-izgara figure:hover img{transform:scale(1.04)}
@media (max-width:620px){.galeri-izgara{grid-template-columns:repeat(2,1fr)}.galeri{padding:60px 0}}

.btn-eposta{background:#fff;color:var(--murekkep);border:1.5px solid #e4e0d6;border-radius:12px;padding:12px 18px;font-weight:700;text-decoration:none}
.btn-eposta:hover{border-color:var(--vurgu)}
.alt-kolonlar a span{display:inline;margin:0}
@media (max-width:980px){.serit #seritEposta{display:none!important}}