/* =====================================================================
   Travian Landing — modern + Travian görsel dili.
   Düz kutu/emoji yok; parşömen panelleri, yeşil gradient butonlar,
   ahşap/altın aksanlar ve oyunun köy illüstrasyonları kullanılır.
   compact.css'e bağımlı DEĞİLDİR (kendi kendine yeter).
   ===================================================================== */

:root{
  --grass:#5a9216; --grass-l:#7cb342; --grass-d:#3f6b0f; --grass-dd:#2f5210;
  --parch:#f7f0dd; --parch-2:#efe5c9; --parch-3:#e7dcbc; --parch-line:#d6c49a;
  --wood:#6b4e2a; --wood-d:#46300f;
  --ink:#3a2e17; --ink-2:#5e4a28; --muted:#7d6d4c;
  --gold:#e0a92e; --gold-d:#b9831a;
  --green-panel:#e6efcf; --green-head:#5a9216;
  --shadow:0 8px 24px rgba(33,46,12,.22);
  --shadow-sm:0 3px 10px rgba(33,46,12,.18);
  --radius:12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:#bcd99a; }
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); line-height:1.55;
  min-height:100vh;
  background:transparent;
}
/* HD Travian lobby arkaplanı — sabit (parallax) tam ekran kapak.
   İçeriğin alt kısımlarda da okunur kalması için üstte hafif aydınlatma,
   altta parşömen tonuna yumuşak geçiş veren ince bir overlay kullanılır. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(20,30,8,.18) 0%, rgba(20,30,8,0) 22%),
    linear-gradient(180deg, rgba(188,217,154,0) 55%, rgba(178,208,140,.55) 100%),
    url(lobby-bg.jpg) no-repeat center top;
  background-size:auto, auto, cover;
}
a{ color:var(--grass-d); text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0 0 .4em; }

/* ---- Genel kapsayıcı ---- */
.lp-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---- Butonlar ---- */
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:14px; line-height:1; cursor:pointer;
  padding:11px 20px; border-radius:8px; border:1px solid transparent;
  text-align:center; transition:transform .08s, filter .15s, box-shadow .15s;
  user-select:none; white-space:nowrap;
}
.lp-btn:active{ transform:translateY(1px); }
.lp-btn-green{
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35);
  background:linear-gradient(180deg,var(--grass-l),var(--grass) 55%,var(--grass-d));
  border-color:var(--grass-dd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 var(--grass-dd), 0 5px 12px rgba(33,46,12,.3);
}
.lp-btn-green:hover{ filter:brightness(1.07); }
.lp-btn-green:active{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 var(--grass-dd); }
.lp-btn-ghost{
  color:var(--ink); background:linear-gradient(180deg,#fffbf0,var(--parch-2));
  border-color:var(--parch-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-sm);
}
.lp-btn-ghost:hover{ filter:brightness(1.03); border-color:var(--wood); }
.lp-btn-gold{
  color:#4a3110; text-shadow:0 1px 0 rgba(255,255,255,.4);
  background:linear-gradient(180deg,#f7d987,var(--gold) 55%,var(--gold-d));
  border-color:var(--gold-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 var(--gold-d), 0 5px 12px rgba(33,46,12,.3);
}
.lp-btn-gold:hover{ filter:brightness(1.06); }
.lp-btn-android{
  color:#e8f5e9; text-shadow:0 1px 1px rgba(0,0,0,.35);
  background:linear-gradient(180deg,#7cb342,#558b2f 55%,#33691e);
  border-color:#2e4a14;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #2e4a14, 0 5px 14px rgba(33,46,12,.35);
}
.lp-btn-android:hover{ filter:brightness(1.08); }
.lp-btn-android .lp-android-ico,
.lp-btn-ios .lp-ios-ico{ flex:0 0 auto; display:block; }
.lp-btn-ios{
  color:#f5f5f7; text-shadow:0 1px 1px rgba(0,0,0,.4);
  background:linear-gradient(180deg,#5a5a5e,#2c2c2e 55%,#1c1c1e);
  border-color:#0a0a0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #0a0a0a, 0 5px 14px rgba(0,0,0,.28);
}
.lp-btn-ios:hover{ filter:brightness(1.1); }
.lp-btn-sm{ font-size:12.5px; padding:9px 12px; border-radius:7px; gap:6px; }
.lp-btn-lg{ font-size:17px; padding:15px 30px; border-radius:10px; }
.lp-btn[disabled],.lp-btn.is-disabled{ filter:grayscale(.6) opacity(.6); pointer-events:none; }
.lp-android-hint{ margin:10px 0 0; font-size:13px; color:var(--ink-2); opacity:.95; }
.lp-hero-cta{ flex-wrap:wrap; }

/* ---- Header ---- */
.lp-header{
  position:sticky; top:0; z-index:100;
  /* ahşap doku hissi veren daha sıcak/açık gradient (eski düz koyu yerine) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px),
    linear-gradient(180deg, #7a5a30 0%, #5a4120 48%, #46300f 100%);
  border-bottom:3px solid var(--gold-d);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.lp-header-inner{ display:flex; align-items:center; gap:22px; height:74px; }
/* Logo "TRAVIAN LEGENDS" koyu yazılı; koyu header'da okunmuyordu.
   Açık parşömen "tabela" plakasına alarak kontrast sağlanır (Travian dili). */
.lp-logo{
  display:flex; align-items:center; flex:0 0 auto;
  background:linear-gradient(180deg,#fcf6e6,#ece0c0);
  border:1px solid var(--gold-d); border-radius:10px;
  padding:6px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 7px rgba(0,0,0,.4);
}
/* Global "img{max-width:100%}" kuralı, header sıkıştığında logoyu yok ediyordu;
   burada logoyu bu kuraldan muaf tutup sabit boyutta bırakıyoruz. */
.lp-logo img{ height:38px; width:auto; max-width:none; display:block; }
.lp-nav{ display:flex; gap:6px; margin-left:6px; }
.lp-nav a{
  color:#f4ecd6; font-weight:600; font-size:14px; padding:9px 14px; border-radius:7px;
  transition:background .15s,color .15s;
}
.lp-nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.lp-nav a.active{ background:rgba(224,169,46,.22); color:#fff; box-shadow:inset 0 0 0 1px rgba(224,169,46,.5); }
.lp-header-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.lp-clock{
  color:#e7d9b3; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:7px; background:rgba(0,0,0,.25); border:1px solid rgba(224,169,46,.35);
}
.lp-clock b{ color:#fff; font-variant-numeric:tabular-nums; }

/* ---- Ortak dropdown (dil / menü / uygulama / hesap) ---- */
.lp-dd{ position:relative; }
.lp-dd > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  color:#f4ecd6; font-weight:700; font-size:13px; padding:8px 11px; border-radius:7px;
  background:rgba(0,0,0,.22); border:1px solid rgba(224,169,46,.35); user-select:none;
}
.lp-dd > summary::-webkit-details-marker{ display:none; }
.lp-dd > summary:hover,.lp-dd[open] > summary{ background:rgba(0,0,0,.34); }
.lp-dd-caret{ font-size:10px; opacity:.8; line-height:1; }
.lp-dd-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:120; min-width:188px;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--wood); border-radius:10px; padding:6px;
  box-shadow:var(--shadow);
}
.lp-dd-menu a,
.lp-dd-menu button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; border-radius:7px; color:var(--ink); font-size:13px; font-weight:600;
  background:transparent; border:0; cursor:pointer;
}
.lp-dd-menu a:hover,
.lp-dd-menu button:hover{
  background:var(--green-panel);
  color:var(--ink);
}
.lp-dd-menu a.active{
  background:rgba(224,169,46,.22);
  color:var(--ink);
}
.lp-dd-app .lp-android-ico,.lp-dd-app .lp-ios-ico{ flex-shrink:0; }

/* Dil seçici */
.lp-lang .globe{ font-size:14px; line-height:1; }
.lp-lang .cur{ letter-spacing:.5px; }
.lp-lang-menu a .lc,
.lp-dd-menu a .lc{
  display:inline-block; min-width:28px; text-align:center; font-weight:800; font-size:11px;
  color:#4a3110; background:linear-gradient(180deg,#fff4cf,var(--gold)); border:1px solid var(--gold-d);
  border-radius:5px; padding:2px 5px;
}

/* Nav: birincil link + “Menü” dropdown */
.lp-nav .lp-more > summary{
  color:#f4ecd6; font-size:13.5px; font-weight:700; padding:8px 12px; border-radius:8px;
  background:transparent; border:0;
}
.lp-nav .lp-more > summary:hover,.lp-nav .lp-more[open] > summary{
  background:rgba(255,255,255,.1); color:#fff;
}
.lp-nav .lp-more .lp-dd-menu{ left:0; right:auto; }
.lp-nav .lp-more .lp-dd-menu .lp-more-worlds{ display:none; }
/* Nav header stilleri dropdown içine sızmamalı (beyaz yazı + açık yeşil hover). */
.lp-nav .lp-dd-menu a{
  color:var(--ink);
  padding:8px 10px;
  font-size:13px;
  border-radius:7px;
  box-shadow:none;
}
.lp-nav .lp-dd-menu a:hover,
.lp-nav .lp-dd-menu a.active{
  color:var(--ink);
  box-shadow:none;
}
.lp-nav .lp-dd-menu a:hover{ background:var(--green-panel); }
.lp-nav .lp-dd-menu a.active{ background:rgba(224,169,46,.22); }

/* Lobby hesap menüsü */
.lp-auth-slot{ display:flex; align-items:center; gap:8px; }
.lp-account > summary{ max-width:168px; }
.lp-account-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-account-logout{ color:#8a2f12 !important; margin-top:2px; border-top:1px solid rgba(120,80,20,.18) !important; border-radius:0 0 7px 7px !important; }

/* ---- Hesap sayfası ---- */
.lp-acc-gate,.lp-acc-panel{ max-width:880px; margin:0 auto; }
.lp-acc-gate{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--wood); border-radius:14px; padding:28px 24px; text-align:center;
  box-shadow:var(--shadow);
}
.lp-acc-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;
}
.lp-acc-tabs a{
  padding:9px 14px; border-radius:8px; font-weight:700; font-size:13px; color:#f4ecd6;
  background:rgba(0,0,0,.22); border:1px solid rgba(224,169,46,.35);
}
.lp-acc-tabs a:hover{ background:rgba(0,0,0,.34); color:#fff; }
.lp-acc-tabs a.active{
  background:rgba(224,169,46,.22); color:#fff; box-shadow:inset 0 0 0 1px rgba(224,169,46,.5);
}
.lp-acc-card{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--wood); border-radius:14px; padding:22px 22px 18px;
  box-shadow:var(--shadow);
}
.lp-acc-card h3{ margin:0 0 14px; font-size:18px; color:#2f5210; }
.lp-acc-form .lp-field{ margin-bottom:12px; }
.lp-acc-hr{ border:0; border-top:1px solid rgba(120,80,20,.22); margin:22px 0; }
.lp-acc-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid rgba(120,80,20,.14);
}
.lp-acc-row:last-child{ border-bottom:0; }
.lp-acc-row .sub{ font-size:12.5px; color:#5a4a28; margin-top:3px; }
.lp-pill{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; color:#5a3a10;
  background:rgba(224,169,46,.22); border:1px solid rgba(185,131,26,.45);
}
.lp-acc-table{ width:100%; border-collapse:collapse; font-size:13px; }
.lp-acc-table th,.lp-acc-table td{
  padding:9px 10px; text-align:left; border-bottom:1px solid rgba(120,80,20,.14);
}
.lp-acc-table th{ color:#4a3110; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.lp-muted{ color:#5a4a28; font-weight:600; }
.lp-acc-card .loading{ color:#5a4a28; font-weight:600; }

/* ---- Hero ---- */
.lp-hero{ padding:46px 0 30px; }
.lp-hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
/* Arkaplan görseli üzerindeki metin için yarı saydam parşömen okunurluk kutusu */
.lp-hero-text{
  background:linear-gradient(180deg, rgba(247,240,221,.88), rgba(239,229,201,.84));
  border:1px solid rgba(185,131,26,.55);
  border-radius:16px;
  padding:28px 30px;
  box-shadow:0 12px 30px rgba(33,46,12,.30), inset 0 1px 0 rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.lp-hero-text h1{
  font-size:38px; line-height:1.15;
  color:#1f3b0a; text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.lp-hero-text h1 .accent{ color:var(--grass-d); }
.lp-hero-lead{
  font-size:17px; color:#2f3b1c; max-width:560px; margin:14px 0 26px;
  background:rgba(255,255,255,.35); padding:10px 14px; border-radius:10px;
  border-left:4px solid var(--grass);
}
.lp-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.lp-hero-stats{ display:flex; gap:26px; margin-top:28px; }
.lp-hero-stats .it{ }
.lp-hero-stats .n{ font-size:26px; font-weight:800; color:#2f5210; line-height:1; text-shadow:0 1px 4px rgba(255,255,255,.8); }
.lp-hero-stats .l{ font-size:12.5px; color:#2a3a16; font-weight:700; margin-top:4px; text-shadow:0 1px 4px rgba(255,255,255,.85); }

/* hero illüstrasyon çerçevesi (ahşap + parşömen) */
.lp-hero-art{ position:relative; }
.lp-frame{
  background:linear-gradient(180deg,#7a5a2e,#553a16);
  padding:10px; border-radius:16px;
  box-shadow:var(--shadow), inset 0 0 0 2px rgba(224,169,46,.45);
}
.lp-frame img{ border-radius:9px; width:100%; display:block; box-shadow:0 4px 10px rgba(0,0,0,.4); }
.lp-frame .cap{
  position:absolute; left:18px; bottom:18px; right:18px;
  background:linear-gradient(180deg,rgba(46,33,15,.0),rgba(46,33,15,.82));
  color:#fff; padding:24px 16px 12px; border-radius:0 0 9px 9px;
}
.lp-frame .cap h3{ font-size:18px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.6); }
.lp-frame .cap p{ margin:0; font-size:13px; color:#f0e9d4; }
.lp-frame .dots{ position:absolute; right:22px; top:22px; display:flex; gap:7px; }
.lp-frame .dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.lp-frame .dots i.act{ background:var(--gold); }

/* ---- Bölüm başlığı ---- */
.lp-section{ padding:34px 0; }
/* Başlıklar da arkaplan üzerinde durduğu için yarı saydam parşömen plaka */
.lp-section-head{
  text-align:center; margin:0 auto 26px; max-width:820px;
  background:linear-gradient(180deg, rgba(247,240,221,.86), rgba(239,229,201,.82));
  border:1px solid rgba(185,131,26,.5);
  border-radius:14px; padding:16px 28px;
  box-shadow:0 8px 22px rgba(33,46,12,.26), inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lp-section-head h2{
  display:inline-block; font-size:26px; color:#23410d;
  text-shadow:0 2px 0 rgba(255,255,255,.5); position:relative; padding:0 12px;
}
.lp-section-head h2:before,.lp-section-head h2:after{
  content:""; position:absolute; top:50%; width:40px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--grass)); 
}
.lp-section-head h2:before{ right:100%; transform:scaleX(-1); }
.lp-section-head h2:after{ left:100%; }
.lp-section-head p{ color:#27370f; margin:6px 0 0; font-size:14.5px; font-weight:600; text-shadow:0 1px 6px rgba(255,255,255,.85),0 1px 1px rgba(255,255,255,.9); }

/* ---- Panel (parşömen) ---- */
.lp-panel{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.lp-panel-head{
  background:linear-gradient(180deg,var(--grass-l),var(--grass-d));
  color:#fff; font-weight:700; font-size:15px; padding:11px 16px;
  text-shadow:0 1px 1px rgba(0,0,0,.35); display:flex; align-items:center; gap:8px;
  border-bottom:2px solid var(--grass-dd);
}
.lp-panel-body{ padding:16px 18px; }

/* ---- Sunucu kartları ---- */
.lp-server-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.lp-server-card{
  position:relative;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .12s, box-shadow .15s;
}
.lp-server-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.lp-server-top{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:linear-gradient(180deg,#6fae22,#477012);
  color:#fff; border-bottom:2px solid var(--grass-dd);
}
.lp-server-badge{
  flex:0 0 auto; width:46px; height:46px; border-radius:10px;
  background:linear-gradient(180deg,#fff4cf,var(--gold)); color:#4a3110;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; line-height:1; border:1px solid var(--gold-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.lp-server-badge .x{ font-size:18px; }
.lp-server-badge .v{ font-size:9px; font-weight:700; opacity:.85; margin-top:2px; }
.lp-server-top .nm{ font-size:18px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.lp-server-top .sub{ font-size:12px; opacity:.9; }
.lp-server-stats{ display:flex; padding:14px 16px; gap:8px; }
.lp-server-stats .st{ flex:1; text-align:center; }
.lp-server-stats .st .n{ font-size:20px; font-weight:800; color:var(--grass-d); line-height:1; }
.lp-server-stats .st .l{ font-size:11px; color:var(--muted); font-weight:600; margin-top:4px; }
.lp-server-stats .st + .st{ border-left:1px dashed var(--parch-line); }
.lp-server-foot{ margin-top:auto; padding:14px 16px; display:flex; gap:10px; border-top:1px solid var(--parch-line); }
.lp-server-foot .lp-btn{ flex:1; }
.lp-server-closed{ font-size:12px; color:#a4521c; font-weight:700; text-align:center; flex:1; align-self:center; }
.lp-pill{
  position:absolute; top:0; right:0; background:var(--gold); color:#4a3110;
  font-size:10.5px; font-weight:800; padding:4px 12px; border-radius:0 var(--radius) 0 10px;
  text-transform:uppercase; letter-spacing:.5px; box-shadow:0 2px 5px rgba(0,0,0,.2);
}

/* ---- Alt: haber + özellikler ---- */
.lp-grid-2{ display:grid; grid-template-columns:1fr 1.4fr; gap:26px; align-items:start; }
.lp-news-item{ padding:12px 0; border-bottom:1px dashed var(--parch-line); }
.lp-news-item:last-child{ border-bottom:0; }
.lp-news-item h4{ margin:0 0 4px; font-size:15px; color:var(--grass-d); }
.lp-news-item p{ margin:0; font-size:13.5px; color:var(--ink-2); }

/* ---- Geliştirme notları (SEO sayfaları) ---- */
.lp-updates-list,.lp-updates-home{ display:grid; gap:16px; }
.lp-updates-home{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.lp-update-card{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.lp-update-card h2,.lp-update-card h3{ margin:8px 0 6px; font-size:17px; line-height:1.35; }
.lp-update-card h2 a,.lp-update-card h3 a{ color:var(--grass-d); text-decoration:none; }
.lp-update-card h2 a:hover,.lp-update-card h3 a:hover{ text-decoration:underline; }
.lp-update-card p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.lp-update-card-compact h3{ font-size:15px; }
.lp-update-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--ink-2); }
.lp-update-cat{ font-weight:700; padding:2px 8px; border-radius:12px; font-size:11px; }
.lp-cat-feature{ background:rgba(90,146,22,.15); color:#3d6310; }
.lp-cat-bugfix{ background:rgba(210,69,69,.12); color:#9a2020; }
.lp-cat-other{ background:rgba(100,120,200,.12); color:#3a4a8a; }
.lp-update-ver{ color:var(--ink-2); }
.lp-update-more{ display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:var(--grass-d); }
.lp-update-single{ max-width:760px; }
.lp-update-detail .lp-panel-body{ padding:22px 24px 20px; }
.lp-update-single h1{ margin:10px 0 16px; font-size:26px; color:#23410d; }
.lp-update-body{ font-size:15px; line-height:1.75; color:var(--ink); }
.lp-update-back{ margin:22px 0 0; }
.lp-breadcrumb{ font-size:13px; color:var(--ink-2); margin:0 0 12px; }
.lp-breadcrumb a{ color:var(--grass-d); font-weight:600; }

.lp-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.lp-feature{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.lp-feature .thumb{ height:108px; overflow:hidden; border-bottom:3px solid var(--grass); }
.lp-feature .thumb img{ width:100%; height:100%; object-fit:cover; }
.lp-feature .ft-body{ padding:13px 15px; }
.lp-feature h4{ margin:0 0 5px; font-size:15px; color:#23410d; }
.lp-feature p{ margin:0; font-size:13px; color:var(--ink-2); }

/* ---- SEO içerik + SSS ---- */
.lp-seo-grid{ grid-template-columns:1.15fr 1fr; align-items:start; }
.lp-prose p{ margin:0 0 12px; font-size:14px; color:var(--ink-2); line-height:1.7; }
.lp-prose p:last-child{ margin-bottom:0; }
.lp-prose b{ color:var(--ink); }
.lp-prose a{ color:var(--grass-d); font-weight:700; text-decoration:underline; }
.lp-faq-item{ border-bottom:1px dashed var(--parch-line); padding:4px 0; }
.lp-faq-item:last-child{ border-bottom:0; }
.lp-faq-item > summary{
  list-style:none; cursor:pointer; padding:11px 28px 11px 4px; position:relative;
  font-weight:700; font-size:14.5px; color:var(--grass-d);
}
.lp-faq-item > summary::-webkit-details-marker{ display:none; }
.lp-faq-item > summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:18px; font-weight:800; color:var(--gold-d); transition:transform .15s;
}
.lp-faq-item[open] > summary::after{ content:"\2212"; }
.lp-faq-item > summary:hover{ color:var(--grass-dd); }
.lp-faq-item p{ margin:0 4px 12px; font-size:13.5px; color:var(--ink-2); line-height:1.65; }

/* ---- Footer ---- */
.lp-footer{
  margin-top:40px;
  background:linear-gradient(180deg, rgba(58,46,23,.97), rgba(40,28,12,.98));
  border-top:3px solid var(--gold-d); color:#e7d9b3;
}
.lp-footer-inner{ padding:26px 0; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:center; text-align:center; }
.lp-footer a{ color:#f0e3bf; font-weight:600; font-size:13.5px; }
.lp-footer a:hover{ color:#fff; }
.lp-footer .sep{ opacity:.4; }
.lp-footer .copy{ width:100%; font-size:12px; color:#bca97e; }

/* =====================================================================
   POPUP (kayıt / aktivasyon / giriş) — kendi parşömen modalı
   ===================================================================== */
#overlaybg{ display:none; position:fixed; inset:0; background:rgba(28,20,8,.62); backdrop-filter:blur(2px); z-index:1000; }
#overlaybg.open{ display:block; }
#popup{ display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001; width:520px; max-width:calc(100vw - 32px); max-height:calc(100vh - 40px); }
#popup.open{ display:block; }
#popup-top{ height:14px; }
#popup-top .pclose{
  position:absolute; right:-10px; top:-10px; width:34px; height:34px; z-index:5;
  background:linear-gradient(180deg,#7a5a2e,#553a16); border:2px solid var(--gold); border-radius:50%;
  color:#fff; font:700 18px/30px Arial,sans-serif; text-align:center; cursor:pointer; text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
#popup-top .pclose:after{ content:"\00d7"; }
#popup-top .pclose:hover{ filter:brightness(1.1); }
#popup-content{
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--wood); border-radius:14px;
  box-shadow:0 0 0 4px rgba(224,169,46,.35), var(--shadow);
  padding:24px 26px; overflow:auto; max-height:calc(100vh - 60px);
}
#popup-bottom{ height:0; }
#popup h1{
  font-size:21px; color:#23410d; margin:0 0 16px; padding-bottom:12px;
  border-bottom:2px solid var(--parch-line); text-shadow:0 1px 0 rgba(255,255,255,.5);
}
#popup .loading{ height:80px; }
.lp-field{ margin-bottom:14px; }
.lp-field label{ display:block; font-weight:700; font-size:13px; color:var(--ink-2); margin-bottom:5px; }
.lp-input,.lp-select{
  width:100%; padding:10px 12px; font-size:14px; color:var(--ink);
  background:#fffdf6; border:1px solid var(--parch-line); border-radius:8px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06); transition:border-color .15s, box-shadow .15s;
}
.lp-input:focus,.lp-select:focus{ outline:none; border-color:var(--grass); box-shadow:0 0 0 3px rgba(90,146,22,.18); }
.lp-server-pick{ background:var(--green-panel); border:1px solid #c7d89a; border-radius:10px; padding:12px 14px; margin-bottom:16px; }
.lp-server-pick label{ color:#3f5d12; }
.lp-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-2); }
.lp-check input{ margin-top:2px; }
.error{ color:#b32020; font-size:12px; font-weight:600; margin-top:5px; min-height:1px; }
.lp-actions{ margin-top:6px; }
.lp-actions .lp-btn{ width:100%; }
.lp-alert{ padding:11px 14px; border-radius:9px; margin-bottom:16px; font-size:13px; font-weight:600; }
.lp-alert.ok{ background:#e3f1cd; border:1px solid #7da933; color:#3a5d10; }
.lp-alert.bad{ background:#f7dada; border:1px solid #d08b8b; color:#b32020; }
.lp-switch{ margin-top:16px; text-align:center; font-size:13px; }
.lp-switch a{ color:var(--grass-d); font-weight:600; }

/* giriş popup'ı sunucu listesi */
#loginServerList{ display:grid; gap:14px; }
.lp-login-empty{ padding:14px; text-align:center; color:var(--ink-2); }
.lp-login-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));
  border:1px solid var(--parch-line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm), inset 0 0 0 2px rgba(224,169,46,.25);
  display:flex; flex-direction:column; transition:transform .12s, box-shadow .15s;
}
.lp-login-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow), inset 0 0 0 2px rgba(224,169,46,.4); }
.lp-login-head{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:16px; min-height:78px; color:#fff;
  background:
    linear-gradient(90deg, rgba(28,46,8,.82) 0%, rgba(40,62,14,.55) 55%, rgba(40,62,14,.2) 100%),
    url('login-card-bg.jpg') center 38% / cover no-repeat;
  border-bottom:2px solid var(--gold-d);
}
.lp-login-badge{
  flex:0 0 auto; width:50px; height:50px; border-radius:10px;
  background:linear-gradient(180deg,#fff4cf,var(--gold)); color:#4a3110;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; line-height:1; border:1px solid var(--gold-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.35);
}
.lp-login-badge .x{ font-size:19px; }
.lp-login-badge .v{ font-size:9px; font-weight:700; opacity:.85; margin-top:2px; }
.lp-login-title .nm{ font-size:19px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.lp-login-title .sub{ font-size:12px; opacity:.92; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.lp-login-pill{
  position:absolute; top:0; right:0; background:var(--gold); color:#4a3110;
  font-size:10px; font-weight:800; padding:4px 11px; border-radius:0 var(--radius) 0 10px;
  text-transform:uppercase; letter-spacing:.5px; box-shadow:0 2px 5px rgba(0,0,0,.25);
}
.lp-login-stats{ display:flex; padding:13px 14px; gap:8px; }
.lp-login-stats .st{ flex:1; text-align:center; }
.lp-login-stats .st .n{ font-size:20px; font-weight:800; color:var(--grass-d); line-height:1; }
.lp-login-stats .st .l{ font-size:11px; color:var(--muted); font-weight:600; margin-top:4px; }
.lp-login-stats .st + .st{ border-left:1px dashed var(--parch-line); }
.lp-login-foot{ padding:0 14px 14px; }
.lp-login-foot .lp-btn{ width:100%; }

/* =====================================================================
   Dünya Liderleri (leaders.php)
   ===================================================================== */
.lp-leader-panel{ margin-bottom:22px; }
.lp-leader-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lp-leader-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.lp-leader-badge{
  flex:0 0 auto; background:linear-gradient(180deg,#fff4cf,var(--gold)); color:#4a3110;
  font-weight:800; font-size:13px; padding:3px 9px; border-radius:7px; border:1px solid var(--gold-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.lp-leader-title .nm{ font-size:16px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.lp-leader-title .ver{ font-size:11.5px; opacity:.9; background:rgba(0,0,0,.18); padding:2px 7px; border-radius:6px; }

/* Durum rozetleri */
.lp-status{
  flex:0 0 auto; font-size:12px; font-weight:800; padding:5px 12px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.4px; border:1px solid rgba(0,0,0,.12);
  text-shadow:none;
}
.lp-status-upcoming{ background:#e7eef6; color:#2c5577; border-color:#b8cde0; }
.lp-status-new{ background:#dff0c6; color:#3a5d10; border-color:#a7c96e; }
.lp-status-running{ background:#fbeec2; color:#8a5a00; border-color:#e3c878; }
.lp-status-ww{ background:#ffe1c2; color:#a4521c; border-color:#f0a868; }
.lp-status-ended{ background:#e9d9d2; color:#6b3a2a; border-color:#c7a08c; }

/* Liderlik tablosu */
.lp-leader-table{ width:100%; border-collapse:collapse; }
.lp-leader-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  color:#6a5a36; font-weight:700; padding:10px 14px; border-bottom:2px solid var(--parch-line);
  background:rgba(214,196,154,.25);
}
.lp-leader-table td{ padding:10px 14px; font-size:14px; color:var(--ink); border-bottom:1px dashed var(--parch-line); }
.lp-leader-table tbody tr:last-child td{ border-bottom:0; }
.lp-leader-table tbody tr:hover{ background:rgba(255,255,255,.4); }
.lp-leader-table tr.lead td{ background:rgba(224,169,46,.14); }
.lp-leader-table th.num,.lp-leader-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.lp-leader-table th.r,.lp-leader-table td.r{ width:46px; text-align:center; }
.lp-leader-table td.player{ font-weight:700; color:#23410d; }
.lp-leader-table td.ali{ color:var(--ink-2); font-weight:600; }
.lp-leader-table td.ali .dash{ color:#b3a47c; }
.lp-leader-table td.pop{ font-weight:800; color:var(--grass-d); }

/* Sıra rozetleri */
.lp-rank{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; font-size:12.5px; font-weight:800; color:#4a3110;
  background:#eaddbb; border:1px solid var(--parch-line);
}
.lp-rank-1{ background:linear-gradient(180deg,#ffe07a,#e0a92e); border-color:var(--gold-d); color:#3a2400; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.lp-rank-2{ background:linear-gradient(180deg,#eef1f5,#c4cdd6); border-color:#9aa6b2; color:#37424f; }
.lp-rank-3{ background:linear-gradient(180deg,#f0c79a,#cd8a4f); border-color:#a9692f; color:#4a2a10; }
.lp-leader-note{ text-align:center; font-size:12.5px; color:#2a3a16; font-weight:600; text-shadow:0 1px 5px rgba(255,255,255,.85); margin-top:6px; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .lp-hero-inner{ grid-template-columns:1fr; }
  .lp-hero-art{ order:-1; max-width:480px; margin:0 auto; }
  .lp-grid-2{ grid-template-columns:1fr; }
  .lp-hero-text h1{ font-size:30px; }
  /* Hero'da zaten var; header'da uygulama butonları dropdown'ta. */
  .lp-header-right .lp-apps{ display:none; }
}
@media (max-width:560px){
  .lp-nav > a{ display:none; }
  .lp-nav .lp-more{ display:block; }
  .lp-nav .lp-more .lp-dd-menu .lp-more-worlds{ display:flex; }
  .lp-clock{ display:none; }
  .lp-header-inner{ height:62px; gap:10px; }
  .lp-logo{ padding:5px 10px; }
  .lp-logo img{ height:30px; }
  .lp-header-right{ gap:7px; }
  .lp-header-right .lp-btn{ padding:9px 12px; font-size:13px; }
  .lp-lang > summary{ padding:8px 9px; }
  .lp-lang .cur{ display:none; }
  .lp-account-name{ max-width:96px; }
  .lp-acc-row{ flex-direction:column; align-items:flex-start; }
  .lp-acc-table{ display:block; overflow-x:auto; }
  .lp-features{ grid-template-columns:1fr; }
  .lp-hero-stats{ gap:18px; }
  #popup-content{ padding:20px 18px; }
  .lp-leader-table th.ali,.lp-leader-table td.ali{ display:none; }
  .lp-leader-table th,.lp-leader-table td{ padding:9px 10px; font-size:13px; }
}

/* =====================================================================
   Mobil yönlendirme notu (mobile.travian.biz.tr)
   Sadece mobil cihazlarda (body.lp-mobile) gösterilir.
   ===================================================================== */
.lp-mobile-note{ display:none; }
body.lp-mobile .lp-mobile-note{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px; padding:12px 14px;
  background:linear-gradient(180deg,#fff7e2,#f3e4bf);
  border:1px solid var(--gold-d); border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), var(--shadow-sm);
}
.lp-mobile-note .mn-ico{ font-size:26px; line-height:1; flex:0 0 auto; }
.lp-mobile-note .mn-txt{ flex:1 1 150px; display:flex; flex-direction:column; gap:2px; }
.lp-mobile-note .mn-txt b{ color:var(--ink); font-size:14px; }
.lp-mobile-note .mn-txt span{ color:var(--ink-2); font-size:12.5px; line-height:1.4; }
.lp-mobile-note .mn-actions{ display:flex; flex-wrap:wrap; gap:8px; flex:0 0 auto; }
.lp-mobile-note .lp-btn{ white-space:nowrap; flex:1 1 auto; text-align:center; }
@media (max-width:560px){
  .lp-mobile-note .mn-actions{ width:100%; }
  .lp-mobile-note .lp-btn{ flex:1 1 100%; }
}