/* ==========================================================
   RULES.CSS (PART 1)
========================================================== */

.rulesHero{

    padding-top:180px;
    padding-bottom:120px;
    text-align:center;

}

.rulesHero h1{

    font-size:70px;
    font-weight:800;
    margin-bottom:20px;

}

.rulesHero p{

    width:800px;
    max-width:100%;
    margin:auto;
    color:#bdbdbd;
    line-height:34px;
    font-size:18px;

}

/* ===================== */

.rulesArea{

    padding-bottom:120px;

}

.rulesArea .container{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:40px;

    align-items:flex-start;

}

/* ===================== */

.rulesMenu{

    position:sticky;

    top:120px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border-radius:18px;

    padding:25px;

}

.rulesMenu h3{

    font-size:24px;

    margin-bottom:25px;

}

.rulesMenu button{

    width:100%;

    display:flex;

    align-items:center;

    gap:15px;

    background:transparent;

    color:white;

    border:none;

    padding:18px;

    border-radius:12px;

    margin-bottom:12px;

    font-size:15px;

    transition:.35s;

    cursor:pointer;

}

.rulesMenu button:hover{

    background:rgba(255,255,255,.08);

}

.rulesMenu button.active{

    background:white;

    color:black;

}

.rulesMenu i{

    font-size:18px;

}

/* ===================== */

.rulesContent{

    display:block;

}

.tab{

    display:none;

}

.tab.active{

    display:block;

    animation:fade .4s;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===================== */

.rule{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(15px);

    border-radius:18px;

    padding:35px;

    margin-bottom:25px;

    transition:.35s;

}

.rule:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.07);

}

.rule h2{

    font-size:24px;

    margin-bottom:18px;

}

.rule p{

    color:#bcbcbc;

    line-height:34px;

    font-size:16px;

}

/* ===================== */

.rule::before{

    content:"";

    display:block;

    width:70px;

    height:3px;

    background:white;

    margin-bottom:20px;

    border-radius:50px;

}

/* ===================== */

.warning{

    background:#ffcc0010;

    border:1px solid #ffcc0035;

}

.danger{

    background:#ff000010;

    border:1px solid #ff000035;

}

.success{

    background:#00ff4410;

    border:1px solid #00ff4435;

}

/* ===================== */

.rule ul{

    margin-top:20px;

    margin-left:20px;

}

.rule li{

    margin-bottom:12px;

    color:#c8c8c8;

}

/* ==========================================================
   RULES.CSS (PART 2)
========================================================== */

/* =======================
INFO BOXES
======================= */

.info-box{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-left:5px solid white;

    border-radius:15px;

    padding:30px;

    margin-bottom:30px;

}

.info-box h3{

    font-size:22px;

    margin-bottom:15px;

}

.info-box p{

    color:#c8c8c8;

    line-height:32px;

}

/* =======================
CEZA TABLOSU
======================= */

.penaltyTable{

    width:100%;

    border-collapse:collapse;

    margin-top:35px;

    overflow:hidden;

    border-radius:15px;

}

.penaltyTable thead{

    background:white;

    color:black;

}

.penaltyTable th{

    padding:18px;

    text-align:left;

}

.penaltyTable td{

    padding:18px;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#d6d6d6;

}

.penaltyTable tbody tr{

    transition:.35s;

}

.penaltyTable tbody tr:hover{

    background:rgba(255,255,255,.05);

}

/* =======================
RULE NUMBER
======================= */

.rule-number{

    width:55px;

    height:55px;

    border-radius:50%;

    background:white;

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    margin-bottom:20px;

}

/* =======================
ACCORDION
======================= */

.accordion{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    border-radius:15px;

    margin-bottom:20px;

    overflow:hidden;

}

.accordion-header{

    padding:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

}

.accordion-header h3{

    font-size:20px;

}

.accordion-header i{

    transition:.35s;

}

.accordion.active i{

    transform:rotate(180deg);

}

.accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.accordion.active .accordion-content{

    max-height:600px;

}

.accordion-content p{

    padding:0 25px 25px;

    line-height:32px;

    color:#c9c9c9;

}

/* =======================
RULE TAGS
======================= */

.tag{

    display:inline-block;

    padding:8px 18px;

    background:white;

    color:black;

    border-radius:50px;

    font-size:13px;

    margin-right:8px;

    margin-top:10px;

}

/* =======================
IMPORTANT BOX
======================= */

.important{

    background:rgba(255,0,0,.08);

    border:1px solid rgba(255,0,0,.25);

    border-left:5px solid red;

    border-radius:15px;

    padding:25px;

    margin:30px 0;

}

.important h3{

    color:#ff6b6b;

    margin-bottom:15px;

}

.important p{

    color:#ddd;

    line-height:30px;

}

/* =======================
SUCCESS BOX
======================= */

.success-box{

    background:rgba(0,255,120,.08);

    border:1px solid rgba(0,255,120,.25);

    border-left:5px solid #00ff88;

    border-radius:15px;

    padding:25px;

    margin:30px 0;

}

.success-box h3{

    color:#00ff88;

    margin-bottom:15px;

}

/* =======================
LIST
======================= */

.rule-list{

    margin-top:20px;

}

.rule-list li{

    list-style:none;

    margin-bottom:15px;

    padding-left:35px;

    position:relative;

    color:#d2d2d2;

}

.rule-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:white;

    font-weight:bold;

}

/* ==========================================================
   RULES.CSS (PART 3)
   Responsive • Footer • Effects
========================================================== */

/* =======================
SEARCH BAR
======================= */

.rules-search{

    width:100%;
    margin-bottom:35px;
    position:relative;

}

.rules-search input{

    width:100%;
    padding:18px 20px 18px 55px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    color:#fff;
    outline:none;
    transition:.3s;

}

.rules-search input:focus{

    border-color:white;
    background:rgba(255,255,255,.08);

}

.rules-search i{

    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:#999;

}

/* =======================
CUSTOM SCROLLBAR
======================= */

.rulesContent::-webkit-scrollbar{

    width:7px;

}

.rulesContent::-webkit-scrollbar-thumb{

    background:white;
    border-radius:20px;

}

.rulesContent::-webkit-scrollbar-track{

    background:#111;

}

/* =======================
RULE CARD EFFECT
======================= */

.rule{

    position:relative;
    overflow:hidden;

}

.rule::after{

    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent);

    transition:.8s;

}

.rule:hover::after{

    left:100%;

}

/* =======================
MENU ANIMATION
======================= */

.rulesMenu button{

    position:relative;
    overflow:hidden;

}

.rulesMenu button::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.08);

    transition:.35s;

}

.rulesMenu button:hover::before{

    left:0;

}

/* =======================
FOOTER
======================= */

footer{

    margin-top:80px;

    padding:45px 0;

    border-top:1px solid rgba(255,255,255,.08);

    background:#090909;

}

footer p{

    text-align:center;

    color:#888;

    font-size:15px;

}

/* =======================
ANIMATIONS
======================= */

.fadeUp{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.scale{

    animation:scale .45s;

}

@keyframes scale{

    from{

        transform:scale(.95);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

/* =======================
MOBILE
======================= */

@media(max-width:1200px){

.rulesArea .container{

grid-template-columns:1fr;

}

.rulesMenu{

position:relative;
top:0;

}

}

@media(max-width:768px){

.rulesHero{

padding-top:140px;
padding-bottom:70px;

}

.rulesHero h1{

font-size:42px;

}

.rulesHero p{

font-size:16px;
line-height:30px;

}

.rulesMenu{

padding:18px;

}

.rulesMenu h3{

font-size:20px;

}

.rulesMenu button{

padding:15px;
font-size:14px;

}

.rule{

padding:22px;

}

.rule h2{

font-size:20px;

}

.rule p{

font-size:15px;
line-height:30px;

}

.penaltyTable{

display:block;
overflow-x:auto;

}

}

/* =======================
SMALL DEVICES
======================= */

@media(max-width:480px){

.rulesHero h1{

font-size:34px;

}

.rule{

padding:18px;

}

.rule h2{

font-size:18px;

}

.rulesMenu button{

font-size:13px;

}

}

/* ==========================================================
END OF RULES.CSS
========================================================== */