/* ══════════════════════════════════════════════════
   GAMGAM GROUP — KURUMSAL STİL
   Lacivert · Gümüş · Beyaz
   Renk değiştirmek için sadece :root bloğunu düzenleyin.
   ══════════════════════════════════════════════════ */
:root{
  --navy:#132A4C;
  --navy-2:#1E3D68;
  --navy-3:#2B5286;
  --navy-dk:#0B1729;
  --navy-lt:#EDF1F7;
  --silver:#A5ADB9;
  --silver-2:#C9CFD8;
  --silver-lt:#E6E9EE;
  --gold:#B08A4F;
  --gold-lt:#F5EEE2;
  --ink:#0D1626;
  --ink-2:#2C3A50;
  --body:#4F5C70;
  --mut:#8892A2;
  --line:#DFE3EA;
  --line-2:#EDF0F4;
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;
  --paper-3:#EFF2F7;
  --ok:#2C7A4B;
  --max:1240px;
  --sh:0 1px 2px rgba(19,42,76,.05),0 8px 28px rgba(19,42,76,.06);
  --sh-2:0 4px 12px rgba(19,42,76,.07),0 22px 48px rgba(19,42,76,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--body);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:16.5px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.16;letter-spacing:-.022em;font-weight:700}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.narrow{max-width:920px}
.thin{max-width:760px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}

#prog{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:300;transition:width .08s linear;
  background:linear-gradient(90deg,var(--navy),var(--gold))}
.rv{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ═══ TOPBAR ═══ */
.tb{background:var(--navy-dk);color:#96A2B5;font-size:12.6px;padding:9px 0;letter-spacing:.15px}
.tb .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px}
.tb .l,.tb .r{display:flex;gap:22px;align-items:center}
.tb b{color:#fff;font-weight:600}
.tb a:hover{color:#fff}
.tb .live{display:inline-flex;align-items:center;gap:7px;color:#7FD0A0;font-weight:600}
.tb .live i{width:6px;height:6px;border-radius:50%;background:#3FBF6E;display:block;position:relative}
.tb .live i::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:rgba(63,191,110,.26);animation:pulse 2.2s infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* ═══ HEADER ═══ */
header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.stuck{box-shadow:var(--sh)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.logo{display:flex;align-items:center;gap:13px}
.logo img{height:38px;width:auto;display:block;transition:opacity .2s}
.logo:hover img{opacity:.82}
.logo img.fl{height:42px;filter:brightness(0) invert(1) opacity(.94)}
.logo .t strong{display:block;font-size:20.5px;font-weight:700;color:var(--navy);letter-spacing:.16em;line-height:1}
.logo .t small{display:flex;align-items:center;gap:8px;font-size:9.4px;font-weight:600;color:var(--silver);
  letter-spacing:.36em;text-transform:uppercase;margin-top:6px}
.logo .t small::before,.logo .t small::after{content:'';height:1px;flex:1;background:var(--silver-2);min-width:14px}
.nl{display:flex;gap:28px;font-size:14.6px;font-weight:500;color:var(--ink-2);align-items:center}
.nl a{position:relative;padding:6px 0}
.nl a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--gold);transition:right .28s}
.nl a:hover{color:var(--navy)}
.nl a:hover::after,.nl a.aktif::after{right:0}
.nl a.aktif{color:var(--navy);font-weight:600}
.ncta{display:flex;align-items:center;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;
  font-weight:600;font-size:14.6px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  position:relative;overflow:hidden;transition:color .25s,border-color .25s,transform .15s;letter-spacing:.2px}
.btn::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .34s cubic-bezier(.2,.8,.3,1)}
.btn:hover::before{transform:translateY(0)}
.btn>*{position:relative;z-index:1}
.btn:active{transform:translateY(1px)}
.b-navy{background:var(--navy);color:#fff}
.b-gold{background:var(--gold);color:#fff}
.b-gold::before{background:var(--navy)}
.b-out{background:transparent;color:var(--navy);border-color:var(--silver-2)}
.b-out:hover{color:#fff;border-color:var(--gold)}
.b-lt{background:#fff;color:var(--navy);border-color:var(--line)}
.b-lt:hover{color:#fff}
.b-wa{background:#25D366;color:#fff}
.b-wa::before{background:#128C4A}
.b-lg{padding:16px 32px;font-size:15.6px}
.burger{display:none;background:none;border:1.5px solid var(--line);color:var(--navy);font-size:19px;cursor:pointer;padding:8px 13px;line-height:1}

/* ═══ SECTIONS ═══ */
section{padding:96px 0}
.tint{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.navy{background:var(--navy);color:#B4C0D2}
.navy h2,.navy h3{color:#fff}
.navy .kick{color:var(--gold)}
.navy .kick::before,.navy .kick::after{background:var(--gold)}
.sh{max-width:760px;margin-bottom:52px}
.sh.ctr{margin-left:auto;margin-right:auto;text-align:center}
.kick{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:11.6px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.kick::before{content:'';width:26px;height:1.5px;background:var(--gold)}
.sh.ctr .kick::after{content:'';width:26px;height:1.5px;background:var(--gold)}
h2{font-size:clamp(29px,3.6vw,45px);font-weight:700}
.sh p{color:var(--body);margin-top:18px;font-size:17.4px}
.not{font-size:14.8px;border-left:2px solid var(--gold);padding-left:22px;max-width:840px;margin-top:30px}
.not strong{color:var(--ink)}

/* ═══ MARQUEE ═══ */
.mq{background:var(--navy-dk);color:#9EAAC0;padding:16px 0;overflow:hidden;white-space:nowrap}
.mq-in{display:inline-flex;animation:slide 52s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq span{font-size:13.4px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.mq span::after{content:'';width:4px;height:4px;background:var(--gold);flex:0 0 auto;transform:rotate(45deg)}

/* ═══ FORM ═══ */
form{border:1px solid var(--line);background:#fff;padding:40px;box-shadow:var(--sh)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{margin-bottom:20px}
label{display:block;font-size:11.8px;font-weight:700;margin-bottom:9px;color:var(--navy);letter-spacing:.13em;text-transform:uppercase}
label .rq{color:var(--gold)}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);
  color:var(--ink);padding:12px 2px;font-size:15.6px;font-family:inherit;transition:border-color .22s}
input::placeholder,textarea::placeholder{color:#AEB6C2}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold)}
textarea{resize:vertical;min-height:100px;border:1.5px solid var(--line);padding:13px 15px}
textarea:focus{border-color:var(--gold)}
select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892A2' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 2px center;background-size:17px;padding-right:32px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:9px 15px;border:1.5px solid var(--line);font-size:13.6px;cursor:pointer;transition:.18s;color:var(--body);font-weight:500}
.chip span:hover{border-color:var(--navy)}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.fbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.fnote{font-size:12.4px;color:var(--mut);margin-top:18px;text-align:center}
.fw{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.side{border:1px solid var(--line);background:#fff;padding:30px;margin-bottom:18px;box-shadow:var(--sh)}
.side h3{font-size:11.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px;font-weight:700}
.ci{display:flex;gap:16px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line-2)}
.ci:last-child{border:0;padding-bottom:0}
.ci .cic{width:36px;height:36px;flex:0 0 36px;background:var(--navy-lt);display:grid;place-items:center;color:var(--navy);font-size:16px}
.ci b{display:block;font-size:15.4px;color:var(--ink);font-weight:600}
.ci span{font-size:13.4px;color:var(--mut);line-height:1.55}
.mapbox{border:1px solid var(--line);height:200px;background:var(--paper-3);display:grid;place-items:center;text-align:center;padding:20px}
.mapbox p{font-size:13px;color:var(--mut)}
.mapbox iframe{width:100%;height:100%;border:0}

/* ═══ SSS ═══ */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{padding:25px 4px;cursor:pointer;font-weight:600;font-size:17.4px;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;transition:color .2s}
summary:hover{color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary .pm{position:relative;width:14px;height:14px;flex:0 0 auto}
summary .pm::before,summary .pm::after{content:'';position:absolute;background:var(--gold);transition:transform .28s}
summary .pm::before{left:0;top:6.25px;width:14px;height:1.5px}
summary .pm::after{left:6.25px;top:0;width:1.5px;height:14px}
details[open] summary .pm::after{transform:scaleY(0)}
details .ans{padding:0 4px 26px;color:var(--body);font-size:15.4px;max-width:840px}

/* ═══ FOOTER ═══ */
footer{background:var(--navy-dk);color:#8593A8;padding:72px 0 0}
.fg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:48px}

.fg>div>p{font-size:14px;color:#8593A8;margin-top:20px;max-width:340px;line-height:1.72}
.fg h4{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:20px;font-weight:700}
.fg ul{list-style:none;display:grid;gap:11px}
.fg li a{font-size:14px;color:#8593A8;transition:.18s;display:inline-block}
.fg li a:hover{color:#fff;transform:translateX(3px)}
.fg address{font-style:normal;font-size:13.8px;color:#8593A8;line-height:1.78}
.kunye{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;font-size:12.2px;color:#5F6B7E;line-height:1.78}
.kunye b{color:#8593A8;font-weight:600}
.fbot{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.4px;color:#55606F}

.fab{position:fixed;right:26px;bottom:26px;z-index:250;width:56px;height:56px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.42);transition:.22s}
.fab:hover{transform:scale(1.1) rotate(-6deg)}
.fab svg{width:28px;height:28px;fill:#fff}

/* ═══ GALERİ ═══ */
.gi{position:relative;overflow:hidden;background:var(--paper-3);border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;padding:16px;transition:.35s}
.gi:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--sh-2)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.gi:hover img{transform:scale(1.05)}
.gi .ph{color:var(--mut);font-size:11.6px;line-height:1.5}
.gi .ph b{display:block;color:var(--ink-2);font-size:12.8px;margin-bottom:5px;font-weight:600}
.gi .ph svg{width:22px;height:22px;margin:0 auto 9px;opacity:.35;color:var(--navy)}

/* ═══ METRİK ŞERİT ═══ */
.mstrip{background:#fff;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mstrip>div{padding:32px 28px;border-right:1px solid var(--line);position:relative;overflow:hidden}
.mstrip>div:last-child{border-right:0}
.mstrip>div::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:2.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.mstrip>div:hover::before{transform:scaleX(1)}
.mstrip .v{font-size:clamp(30px,3.5vw,44px);font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.035em}
.mstrip .v sup{font-size:.44em;color:var(--gold);vertical-align:super;margin-left:3px;font-weight:600}
.mstrip .k{font-size:13.2px;color:var(--body);margin-top:10px;line-height:1.5}
.mstrip .y2{font-size:10.6px;color:var(--mut);margin-top:6px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

@media(max-width:1040px){
  .fw{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr;gap:38px}
  .mstrip{grid-template-columns:repeat(2,1fr)}
  .mstrip>div:nth-child(2){border-right:0}
  .mstrip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
  .tb .l span:nth-child(2),.tb .r span:last-child{display:none}
  .nl{display:none;position:absolute;top:84px;left:0;right:0;background:#fff;flex-direction:column;
    gap:0;padding:8px 28px 22px;border-bottom:1px solid var(--line);align-items:stretch;box-shadow:var(--sh-2)}
  .nl.open{display:flex}
  .nl a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:16px}
  .nl a::after{display:none}
  .burger{display:block}
  .ncta .b-gold,.ncta .b-navy{display:none}
  section{padding:62px 0}
  .row,.fbtns{grid-template-columns:1fr}
  form{padding:26px 22px}
  .fg{grid-template-columns:1fr}
  .mstrip{grid-template-columns:1fr}
  .mstrip>div{border-right:0;border-bottom:1px solid var(--line)}
  .mstrip>div:last-child{border-bottom:0}
  .logo img{width:44px;flex:0 0 44px}
  .logo .t strong{font-size:18px}
}


/* ═══ FOTOĞRAF YUVASI ═══
   Fotoğraf eklemek için <div class="ph">...</div> yerine
   <img src="foto/klasor/dosya.jpg" alt="Açıklama"> yazın. */
.fo{position:relative;overflow:hidden;background:var(--paper-3);border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;padding:20px;margin:0;transition:.35s}
.fo::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--navy);transition:box-shadow .35s;pointer-events:none}
.fo:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.fo:hover::after{box-shadow:inset 0 0 0 2px var(--navy)}
.fo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.fo:hover img{transform:scale(1.05)}
.fo .ph{color:var(--mut);font-size:11.4px;line-height:1.6;position:relative}
.fo .ph b{display:block;color:var(--ink-2);font-size:13.4px;margin-bottom:7px;font-weight:600}
.fo .ph code{font-size:10.6px;color:#A8B0BC;letter-spacing:.02em}
.fo .ph svg{width:26px;height:26px;margin:0 auto 11px;opacity:.3;color:var(--navy)}

/* ═══ FOTOĞRAF IZGARASI ═══ */
.fgrid{display:grid;gap:18px}
.fgrid.g3{grid-template-columns:repeat(3,1fr)}
.fgrid.g4{grid-template-columns:repeat(4,1fr)}
.fgrid .fo{aspect-ratio:1/1}
.fgrid .fo.w2{grid-column:span 2;aspect-ratio:2/1}
.fgrid .fo.h2{grid-row:span 2;aspect-ratio:auto}
@media(max-width:1000px){.fgrid.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .fgrid.g3,.fgrid.g4{grid-template-columns:repeat(2,1fr);gap:12px}
  .fgrid .fo.h2{grid-row:span 1;aspect-ratio:1/1}
}

/* daha fazla nefes alanı */
.sh{margin-bottom:56px}
section{padding:100px 0}
@media(max-width:760px){section{padding:60px 0}.sh{margin-bottom:36px}}