:root { --zemin: #fff6ec; --kum: #f3e6d3; --murekkep: #1e1b2b; --murekkep-2: #2c2840; --paprika: #dd3f27; --paprika-yazi: #c2351f; --paprika-koyu: #a82c19; --sefta: #fbd9cc;
  --beyaz: #fff; --soluk: #6a6478; --cizgi: #e9dccb; --hata: #b3261e; --basari: #2e6b1f; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--murekkep); background: var(--zemin); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 2px; }
.koyu :focus-visible, .kb :focus-visible, .kahraman-panel :focus-visible { outline-color: var(--zemin); }

.kabuk { max-width: 1180px; margin: 0 auto; padding: 0 16px 56px; }
header.ust-cubuk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 44px; width: auto; }
.isletme { color: var(--soluk); font-weight: 600; margin-left: 14px; }
.sag { display: flex; align-items: center; gap: 10px; }

.dugme, button { font: inherit; font-weight: 600; display: inline-block; padding: 10px 22px; border-radius: 14px; border: 2px solid var(--murekkep); background: var(--murekkep); color: #fff; cursor: pointer; text-decoration: none; line-height: 1.2; }
.dugme:hover, button:hover { background: var(--murekkep-2); border-color: var(--murekkep-2); }
.dugme.vurgu, button.vurgu { background: var(--paprika-yazi); border-color: var(--paprika-yazi); color: #fff; }
.dugme.vurgu:hover, button.vurgu:hover { background: var(--paprika-koyu); border-color: var(--paprika-koyu); }
.dugme.hayalet, button.hayalet { background: transparent; color: inherit; border-color: currentColor; }
.dugme.hayalet:hover, button.hayalet:hover { background: rgba(127, 127, 127, 0.18); }
form.satir { display: inline; margin: 0; }

.kahraman-panel { background-color: var(--murekkep); color: #fff; border-radius: 28px; padding: 44px 40px; margin: 8px 0 20px; position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 88% 12%, rgba(221, 63, 39, 0.5) 0, transparent 36%), radial-gradient(circle at 8% 112%, rgba(221, 63, 39, 0.35) 0, transparent 42%); }
.kahraman-panel h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 12px; max-width: 14em; }
.kahraman-panel p { margin: 0; max-width: 40em; color: rgba(255, 255, 255, 0.84); font-size: 17px; }
.say { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.say span { background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 6px 16px; font-weight: 600; }

.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.kart { border-radius: 24px; padding: 0; min-height: 230px; display: flex; flex-direction: column; background: var(--kum); overflow: hidden; }
.kart-govde { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kart-gorsel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.kart-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.kart-gorsel .rozet { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, 0.95); color: var(--murekkep); border-color: transparent; }
.kart.r0 { background: var(--kum); } .kart.r1 { background: var(--paprika-yazi); color: #fff; } .kart.r2 { background: var(--murekkep-2); color: #fff; }
.kart.r3 { background: var(--murekkep); color: #fff; } .kart.r4 { background: var(--sefta); } .kart.r5 { background: #fff; }
.kart.pasif { opacity: 0.86; }
.kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ikon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 20px; background: rgba(127, 127, 127, 0.22); }
.kart h2 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 4px 0 0; }
.kart p { margin: 0; opacity: 0.85; }
.eylemler { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.kart.koyu .dugme:not(.hayalet):not(.vurgu), .kart.koyu button:not(.hayalet):not(.vurgu) { background: var(--zemin); border-color: var(--zemin); color: var(--murekkep); }
.kart.r1 .dugme:not(.hayalet):not(.vurgu):hover, .kart.koyu .dugme:not(.hayalet):not(.vurgu):hover { background: #fff; }
.rozet { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1.5px solid currentColor; white-space: nowrap; }
.rozet.acik::before { content: "● "; }
.not { font-size: 13px; opacity: 0.85; }
.fiyat { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.fiyat .rozet { font-size: 12px; margin-left: 6px; vertical-align: middle; letter-spacing: 0; }

.form-kart { background: var(--beyaz); border-radius: 28px; padding: 32px; max-width: 600px; }
.form-kart h1 { font-size: 30px; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 6px; line-height: 1.1; }
.alt { color: var(--soluk); margin: 0 0 18px; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input, select { font: inherit; width: 100%; padding: 11px 14px; border: 1.5px solid var(--cizgi); border-radius: 12px; background: #fff; color: var(--murekkep); }
.hata { color: var(--hata); font-size: 13px; margin-top: 6px; font-weight: 600; }
.bilgi, .uyari, .basari { padding: 12px 16px; border-radius: 16px; margin: 0 0 16px; font-weight: 500; }
.bilgi { background: var(--kum); } .uyari { background: #fbdcd5; color: #7a1913; } .basari { background: #dcebd3; color: #1f4a14; }
.bolum { border-top: 1.5px solid var(--cizgi); margin-top: 24px; padding-top: 2px; }
.bolum h2 { font-size: 16px; margin: 14px 0 0; }
.form-eylem { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.giris-duzen { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; min-height: calc(100vh - 32px); padding: 16px 0; align-items: stretch; }
.giris-duzen .kahraman-panel { margin: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; }
.giris-duzen .form-kart { align-self: center; width: 100%; max-width: none; }
@media (max-width: 820px) { .giris-duzen { grid-template-columns: 1fr; min-height: 0; } .kahraman-panel { padding: 32px 24px; } }

/* ---- ana sayfa ve giriş (vitrin) ---- */
.vitrin-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.vitrin-ust nav { display: flex; gap: 22px; align-items: center; }
.vitrin-ust nav a:not(.dugme) { text-decoration: none; font-weight: 600; }
.kb { position: relative; overflow: hidden; border-radius: 32px; color: #fff; padding: 56px 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; min-height: 560px;
  background: radial-gradient(circle at 85% 8%, rgba(221, 63, 39, 0.5), transparent 38%), radial-gradient(circle at 12% 108%, rgba(221, 63, 39, 0.35), transparent 44%), linear-gradient(135deg, #2c2840 0%, #1e1b2b 100%); }
.kb h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 0 0 18px; }
.kb > div > p { font-size: 18px; color: rgba(255, 255, 255, 0.88); max-width: 34em; margin: 0 0 26px; }
.kb-dugme { display: flex; gap: 12px; flex-wrap: wrap; }
.kb .say { margin-top: 26px; }
.kb .form-kart { background: #fff; color: var(--murekkep); max-width: none; width: 100%; }
.kb .form-kart h1 { font-size: 30px; color: var(--murekkep); margin: 0 0 6px; max-width: none; }
.kb .form-kart p { color: var(--soluk); font-size: 15px; margin: 0 0 18px; max-width: none; }
.kb .form-kart p.uyari { color: #7a1913; }
.bolum-baslik { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; font-weight: 600; line-height: 1.08; margin: 0 0 12px; }
.panel-kum { background: var(--kum); border-radius: 32px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 16px 0; }
.panel-kum p { font-size: 17px; color: #4a4558; max-width: 32em; margin: 0 0 22px; }
.vitrin-bolum { margin: 64px 0 16px; }
.vitrin-bolum > .alt { max-width: 40em; }
.ozellikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 16px 0; }
.ozellik { border-radius: 28px; padding: 32px; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--paprika-yazi); color: #fff; }
.ozellik:nth-child(2) { background: var(--murekkep-2); } .ozellik:nth-child(3) { background: var(--murekkep); } .ozellik:nth-child(4) { background: var(--sefta); color: var(--murekkep); }
.ozellik h3 { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 8px; }
.ozellik p { margin: 0; opacity: 0.92; }
.nokta { width: 54px; height: 54px; border-radius: 18px; background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.adim { background: #fff; border-radius: 28px; padding: 28px; border: 1px solid var(--cizgi); }
.adim .no { width: 44px; height: 44px; border-radius: 50%; background: var(--paprika-yazi); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 14px; }
.adim h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.02em; } .adim p { margin: 0; color: var(--soluk); }
.cta-bandi { background: var(--paprika-yazi); color: #fff; border-radius: 32px; padding: 56px 32px; text-align: center; margin: 64px 0 16px; }
.cta-bandi .dugme { background: var(--zemin); border-color: var(--zemin); color: var(--murekkep); }
.cta-bandi .dugme:hover { background: #fff; border-color: #fff; }
.cta-bandi p { margin: 0 0 22px; font-size: 18px; }
footer.alt-bilgi { color: var(--soluk); padding: 24px 4px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .kb { grid-template-columns: 1fr; padding: 36px 22px; min-height: 0; } .panel-kum { grid-template-columns: 1fr; padding: 32px 22px; } .vitrin-ust nav a:not(.dugme) { display: none; } }
.dil-secici { display: flex; gap: 4px; align-items: center; }
.dil-secici a, .dil-secici span { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; }
.dil-secici a { border-color: var(--cizgi); color: var(--soluk); } .dil-secici a:hover { border-color: var(--murekkep); color: var(--murekkep); }
.dil-secici span { background: var(--murekkep); color: #fff; }

/* ---- fotoğraflar (Gemini Pro ile üretilmiş, bize ait; gorseller/ klasörü) ---- */
.foto-yuvarlak { width: 100%; height: auto; display: block; border-radius: 24px; }
.kb.foto { background: linear-gradient(90deg, rgba(30, 27, 43, 0.92) 0%, rgba(30, 27, 43, 0.62) 38%, rgba(30, 27, 43, 0.08) 72%), url(/images/hero.jpg) center right / cover no-repeat; min-height: 640px; }
.kb.foto.giris { background: linear-gradient(90deg, rgba(30, 27, 43, 0.92) 0%, rgba(30, 27, 43, 0.68) 45%, rgba(30, 27, 43, 0.28) 100%), url(/images/hero.jpg) center / cover no-repeat; }
.kb-metin { max-width: 36em; }
.kahraman-panel.foto { background: linear-gradient(90deg, rgba(30, 27, 43, 0.93) 0%, rgba(30, 27, 43, 0.62) 55%, rgba(30, 27, 43, 0.28) 100%), url(/images/mutfak.jpg) center / cover no-repeat; }
.ozellik.foto-telefon, .ozellik.foto-sokak, .ozellik.foto-veri, .ozellik.foto-kurulum { color: #fff; min-height: 420px; background-size: cover; background-position: center; }
.ozellik.foto-telefon { background-image: linear-gradient(180deg, rgba(30, 27, 43, 0) 30%, rgba(30, 27, 43, 0.94) 100%), url(/images/telefon.jpg); }
.ozellik.foto-sokak { background-image: linear-gradient(180deg, rgba(30, 27, 43, 0) 30%, rgba(30, 27, 43, 0.94) 100%), url(/images/sokak.jpg); }
.ozellik.foto-veri { background-image: linear-gradient(180deg, rgba(30, 27, 43, 0) 30%, rgba(30, 27, 43, 0.94) 100%), url(/images/veri.jpg); }
.ozellik.foto-kurulum { background-image: linear-gradient(180deg, rgba(30, 27, 43, 0) 30%, rgba(30, 27, 43, 0.94) 100%), url(/images/kurulum.jpg); }
.ipucu { font-size: 12px; color: var(--soluk); margin-top: 4px; }
.gecis { margin: 18px 0 0; font-size: 14px; } .gecis a { font-weight: 700; color: var(--paprika-yazi); }