@charset "UTF-8";
/* =======================================================================
   Doğan Oto - Login / Şifre Hatırlat / Bayi Başvuru
   EntegreTicaretDoganMasterLogin.master + 3 içerik sayfası kullanır.
   Vertical login (loginVertical.css) baz alınmıştır; arka plan
   doganotomotiv.com.tr hero videosu ile canlandırılmıştır.
   ======================================================================= */
:root{
  --ink:#14171C; --ink-soft:#6B7280; --line:#E4E7EC; --bg-soft:#F4F5F7;
  --accent:#F07F1E; --accent-deep:#D2660A; --accent-soft:rgba(240,127,30,.10);
  --navy:#23395D;
  --dark:#0B0D11; --dark-2:#15181F;
  --ok:#1E9C4F; --err:#B42318;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; color:var(--ink);
  background:var(--dark); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }

/* ============ SAHNE + VİDEO ============ */
.dg-stage{ position:relative; min-height:100vh; display:flex; flex-direction:column; color:#fff; isolation:isolate; }

.dg-media{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(900px 600px at 82% 20%, rgba(240,127,30,.22), transparent 60%),
    radial-gradient(700px 520px at 8% 92%, rgba(35,57,93,.45), transparent 60%),
    linear-gradient(160deg, #13161C 0%, var(--dark) 100%);
}
.dg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04); transition:opacity 1.2s ease, transform 8s ease-out;
}
.dg-video-on .dg-video{ opacity:1; transform:scale(1); }
.dg-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,9,12,.90) 0%, rgba(8,9,12,.70) 42%, rgba(8,9,12,.38) 100%),
    linear-gradient(0deg, rgba(8,9,12,.85) 0%, transparent 38%);
}
.dg-grain{
  position:absolute; inset:0; opacity:.025; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px); background-size:3px 3px;
}

/* ============ ÜST BAR ============ */
.dg-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px clamp(18px,4vw,56px);
}
.dg-logo img{ height:52px; width:auto; display:block; }
.dg-links{ display:flex; align-items:center; gap:4px; }
.dg-links button, .dg-links a{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px;
  background:transparent; border:1px solid transparent; color:rgba(255,255,255,.82);
  font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:all .2s ease;
}
.dg-links button:hover, .dg-links a:hover{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.dg-links svg{ width:16px; height:16px; flex-shrink:0; }
.dg-links .dg-site{ border-color:rgba(255,255,255,.18); margin-left:6px; }
.dg-links .dg-site:hover{ background:var(--accent); border-color:var(--accent); }

/* ============ ANA GRID ============ */
.dg-main{
  flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,440px);
  align-items:center; gap:clamp(28px,6vw,96px);
  padding:clamp(12px,3vw,32px) clamp(18px,4vw,56px) clamp(24px,4vw,40px);
}

/* ---- Hero (sol) ---- */
.dg-hero{ max-width:640px; }
.dg-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 10px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px);
  font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#FFD9B8;
}
.dg-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(240,127,30,.6); animation:dgPulse 2.2s infinite; }
@keyframes dgPulse{ 0%{box-shadow:0 0 0 0 rgba(240,127,30,.55);} 70%{box-shadow:0 0 0 10px rgba(240,127,30,0);} 100%{box-shadow:0 0 0 0 rgba(240,127,30,0);} }

.dg-hero h1{
  margin-top:22px; font-weight:800; letter-spacing:-1.2px; line-height:1.04;
  font-size:clamp(34px,4.8vw,62px);
}
.dg-hero h1 em{ font-style:normal; color:var(--accent); }
.dg-lead{ margin-top:18px; max-width:520px; font-size:clamp(14.5px,1.25vw,17px); line-height:1.65; color:rgba(255,255,255,.74); }

.dg-feats{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.dg-feats li{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.9);
}
.dg-feats svg{ width:16px; height:16px; color:var(--accent); flex-shrink:0; }

/* Haber / kampanya kartları (news haber_tip = 3) */
.dg-news{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:34px; max-width:600px; }
.dg-news-card{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  background:#1A1E26 center/cover no-repeat; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .3s ease, border-color .3s ease;
}
.dg-news-card:hover{ transform:translateY(-4px); border-color:rgba(240,127,30,.7); }

/* ---- Form kartı (sağ) ---- */
.dg-card{
  position:relative; background:rgba(255,255,255,.97); color:var(--ink);
  border-radius:22px; padding:clamp(26px,3vw,38px);
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.dg-card::before{
  content:""; position:absolute; left:28px; right:28px; top:0; height:4px; border-radius:0 0 6px 6px;
  background:linear-gradient(90deg, var(--accent), #FFB066);
}
.dg-card.wide{ max-width:none; }
.dg-main.has-wide{ grid-template-columns:minmax(0,1fr) minmax(360px,560px); }

.dg-card h2{ font-size:26px; font-weight:800; letter-spacing:-.4px; }
.dg-card .sub{ color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin-top:8px; margin-bottom:26px; }

/* ============ FORM ELEMANLARI ============ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.f{ margin-bottom:16px; }
.f label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.f label .required{ color:var(--accent-deep); }
.f input, .f select, .f textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 14px;
  font-size:14.5px; font-family:inherit; color:var(--ink); outline:none; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.f input:focus, .f select:focus, .f textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.f select{ appearance:none; -webkit-appearance:none; }
.f.select-f{ position:relative; }
.f.select-f::after{ content:"⌄"; position:absolute; right:14px; bottom:14px; color:var(--ink-soft); pointer-events:none; }
.ico-wrap{ position:relative; }
.ico-wrap > svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#9AA1AC; pointer-events:none; z-index:1; }
.ico-wrap input{ padding-left:42px; }
.ico-wrap:focus-within > svg{ color:var(--accent); }
.field-error{ display:block; color:var(--err); font-size:12px; margin-top:6px; font-weight:600; }

.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:44px; }
.eye-btn{ position:absolute; right:11px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:4px; color:var(--ink-soft); }
.eye-btn svg{ width:19px; height:19px; display:block; }

.row-between{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; flex-wrap:wrap; gap:10px; }
.remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); cursor:pointer; }
.remember input{ accent-color:var(--accent); width:16px; height:16px; }
.forgot{ font-size:13px; color:var(--accent-deep); text-decoration:none; font-weight:600; }
.forgot:hover{ text-decoration:underline; }

/* Rol seçimi: segment kontrol */
.role-switch{ display:flex; gap:4px; padding:4px; margin-bottom:20px; background:var(--bg-soft); border-radius:12px; }
.role-switch label{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; transition:all .2s ease; text-align:center;
}
.role-switch input{ position:absolute; opacity:0; pointer-events:none; }
.role-switch label.is-checked{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(20,22,30,.10); }
.role-switch label.is-checked::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }

.btn-primary{
  width:100%; padding:15px; background:var(--accent); border:none; border-radius:12px;
  color:#fff; font-family:inherit; font-weight:700; font-size:15px; cursor:pointer; letter-spacing:.2px;
  transition:background .2s ease, transform .12s ease, box-shadow .2s ease;
  display:block; text-align:center; text-decoration:none; position:relative;
  box-shadow:0 10px 24px rgba(240,127,30,.32);
}
.btn-primary:hover{ background:var(--accent-deep); color:#fff; box-shadow:0 12px 28px rgba(240,127,30,.42); }
.btn-primary:active{ transform:scale(.985); }
.btn-primary.is-loading{ color:transparent !important; pointer-events:none; background:var(--accent-deep); }
.btn-primary.is-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

.btn-outline{
  display:block; width:100%; text-align:center; text-decoration:none; padding:14px; margin-top:12px;
  background:#fff; border:1.5px solid var(--ink); border-radius:12px; color:var(--ink);
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:all .2s ease;
}
.btn-outline:hover{ background:var(--ink); color:#fff; }

.checkbox-line{ display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--ink-soft); margin-bottom:22px; line-height:1.55; }
.checkbox-line input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }

.foot-note{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:20px; }
.foot-note a{ color:var(--accent-deep); font-weight:700; text-decoration:none; }
.foot-note a:hover{ text-decoration:underline; }

.dogan-links{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.dogan-links a{
  display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border-radius:10px;
  background:var(--bg-soft); color:var(--ink); text-decoration:none; font-weight:700; font-size:12px; text-align:center;
  border:1px solid var(--line); transition:all .2s ease;
}
.dogan-links a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.dogan-links svg{ width:14px; height:14px; flex-shrink:0; }

.info-note{ background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:20px; }

/* Sonuç kartı (bilgi sayfaları) */
.result-card{ text-align:center; padding:10px 4px 30px; }
.result-card .result-icon{ width:80px; height:80px; border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; animation:resultPop .45s cubic-bezier(.34,1.56,.64,1); }
.result-card .result-icon svg{ width:36px; height:36px; }
.result-card.ok .result-icon{ background:#E9F9EF; color:var(--ok); }
.result-card.err .result-icon{ background:#FDEDED; color:var(--err); }
.result-card h2{ font-size:23px; line-height:1.3; margin-bottom:12px; }
.result-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.75; max-width:340px; margin:0 auto; }
@keyframes resultPop{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }

/* ============ DURUM MESAJI + TOAST ============ */
.alert-status{ border-radius:12px; padding:14px 16px; margin-bottom:18px; font-size:13px; line-height:1.5; display:flex; gap:10px; align-items:flex-start; }
.alert-status.err{ background:#FDEDED; border:1px solid #F3B9B9; color:#8A1F1F; }
.alert-status.ok{ background:#E9F9EF; border:1px solid #A9E3BC; color:#175C33; }
.alert-status img{ width:26px; height:26px; flex-shrink:0; }

#toastWrap{ position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:12px; width:min(430px, calc(100vw - 28px)); pointer-events:none; }
.alert-status.toast{
  pointer-events:auto; position:relative; width:100%; margin:0; padding:16px 40px 16px 16px;
  background:#fff; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.35); overflow:hidden;
  opacity:0; transform:translateY(-26px) scale(.97);
  transition:opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}
.alert-status.toast.show{ opacity:1; transform:translateY(0) scale(1); }
.alert-status.toast.leaving{ opacity:0; transform:translateY(-16px) scale(.97); transition:opacity .22s ease, transform .22s ease; }
.alert-status.toast .toast-icon{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.alert-status.toast .toast-icon svg{ width:17px; height:17px; }
.alert-status.toast.err .toast-icon{ background:#FDEDED; color:#A81F23; }
.alert-status.toast.ok .toast-icon{ background:#E9F9EF; color:#175C33; }
.alert-status.toast .toast-close{ position:absolute; top:10px; right:10px; width:22px; height:22px; border:none; background:transparent; color:inherit; opacity:.5; cursor:pointer; font-size:14px; line-height:1; border-radius:6px; }
.alert-status.toast .toast-close:hover{ opacity:1; background:rgba(0,0,0,.06); }
.alert-status.toast .toast-bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left; }
.alert-status.toast.err .toast-bar{ background:var(--accent); }
.alert-status.toast.ok .toast-bar{ background:#2E9E5B; }
.alert-status.toast .toast-bar.shrinking{ animation:toastShrink linear forwards; }
@keyframes toastShrink{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

/* ============ ALT BAR ============ */
.dg-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px clamp(18px,4vw,56px) 22px; font-size:12.5px; color:rgba(255,255,255,.55);
}
.dg-foot-right{ display:flex; align-items:center; gap:14px; }
.dg-powered{ display:inline-flex; opacity:.75; transition:opacity .2s ease; }
.dg-powered:hover{ opacity:1; }
.dg-powered img{ height:30px; width:auto; display:block; }
.dg-vidctl{
  display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer; transition:background .2s ease;
}
.dg-vidctl:hover{ background:var(--accent); border-color:var(--accent); }
.dg-vidctl svg{ width:14px; height:14px; }
.dg-video-on .dg-vidctl{ display:inline-flex; }

/* ============ BİLGİ ÇEKMECESİ (Hakkımızda / Yardım / İletişim) ============ */
body.drawer-lock{ overflow:hidden; }
.drawer-overlay{ position:fixed; inset:0; background:rgba(5,6,8,.6); z-index:80; opacity:0; pointer-events:none; transition:opacity .3s ease; backdrop-filter:blur(2px); }
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:460px; max-width:92vw; background:var(--dark-2); color:#fff; z-index:90;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  box-shadow:-18px 0 50px rgba(0,0,0,.45); border-left:3px solid var(--accent);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.drawer-head h3{ font-size:19px; font-weight:700; }
.drawer-close{ width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease; }
.drawer-close:hover{ background:var(--accent); border-color:var(--accent); }
.drawer-close svg{ width:16px; height:16px; }
.drawer-body{ padding:24px; overflow-y:auto; flex:1; }
.drawer-panel{ display:none; }
.drawer-panel.active{ display:block; animation:panelIn .3s ease; }
@keyframes panelIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.dcard{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:20px 22px; margin-bottom:18px; }
.dcard h4{ font-size:15px; font-weight:700; margin-bottom:14px; }
.dcard p{ font-size:14px; line-height:1.75; color:#DDE1E7; }
.dcard p, .dcard p *{ color:#DDE1E7 !important; background:transparent !important; font-size:14px !important; line-height:1.75 !important; }
.dcard p img{ display:none !important; }
.dcard p a{ color:#fff !important; text-decoration:underline; }

.brand-row{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:14px; }
.brand-row strong{ font-size:14.5px; line-height:1.4; }
.brand-logo{ height:30px; width:auto; max-width:220px; display:block; object-fit:contain; }
.brand-logo-chip{ display:inline-flex; align-items:center; background:#fff; padding:9px 16px; border-radius:10px; }
.clist{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.clist li{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#C3C8D1; line-height:1.5; }
.clist li svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--accent); }
.clist li a{ color:#C3C8D1; text-decoration:none; }
.clist li a:hover{ color:#fff; }
.map-box{ border-radius:12px; overflow:hidden; min-height:220px; position:relative; }
.map-box iframe{ display:block; width:100%; height:220px; border:0; }

.acc-item{ border-bottom:1px solid rgba(255,255,255,.08); }
.acc-item:first-child{ border-top:1px solid rgba(255,255,255,.08); }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:transparent; border:none; padding:17px 2px; cursor:pointer; text-align:left; }
.acc-head span{ font-weight:700; font-size:14.5px; color:#fff; }
.acc-toggle{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; transition:all .2s ease; }
.acc-item.open .acc-toggle{ background:var(--accent); border-color:var(--accent); transform:rotate(45deg); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc-item.open .acc-panel{ max-height:20000px; }
.acc-panel-inner{ padding:0 2px 20px; font-size:13.3px; line-height:1.7; color:#C3C8D1; }
.acc-panel-inner p + p{ margin-top:10px; }

/* ============ GİRİŞ ANİMASYONLARI ============ */
.dg-rise{ opacity:0; transform:translateY(18px); animation:dgRise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.dg-rise.d1{ animation-delay:.08s; } .dg-rise.d2{ animation-delay:.18s; } .dg-rise.d3{ animation-delay:.28s; }
.dg-rise.d4{ animation-delay:.38s; } .dg-rise.d5{ animation-delay:.5s; }
@keyframes dgRise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .dg-rise{ animation:none; opacity:1; transform:none; }
  .dg-dot{ animation:none; }
  .dg-video{ display:none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .dg-news{ display:none; }
}
@media (max-width:900px){
  .dg-main, .dg-main.has-wide{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .dg-hero{ max-width:none; }
  .dg-hero h1{ margin-top:16px; font-size:clamp(28px,7vw,40px); }
  .dg-feats{ display:none; }
  .dg-links .lbl{ display:none; }
  .dg-links button, .dg-links a{ padding:0 11px; }
  .dg-shade{ background:linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,.92) 55%); }
}
@media (max-width:520px){
  .dg-top{ padding:16px 16px 6px; }
  .dg-logo img{ height:40px; }
  .dg-links .dg-site{ display:none; }
  .dg-main{ padding:8px 16px 20px; }
  .dg-lead{ display:none; }
  .dg-card{ padding:24px 20px; border-radius:18px; }
  .dg-card h2{ font-size:22px; }
  .grid-2{ grid-template-columns:1fr; gap:0; }
  .dogan-links{ grid-template-columns:1fr; }
  .dg-foot{ justify-content:center; text-align:center; }
  .drawer{ width:100vw; max-width:100vw; }
  #toastWrap{ top:12px; width:calc(100vw - 20px); }
}